在目录网站上使用砖石.默认情况下,显示的项目按日期排序,然后按部件号排序.我的图像变化很大.问题是,如果我错了,请纠正我,Masonry将第2行,第1项设置在第1行中最短的项目下方,而不是页面左侧.所以换句话说,当我的数据库返回一个特定的顺序时,Masonry将那些从上到下的顺序排列(当变化的高度)时,而不是从左到右.
文档中没有找到任何东西来控制它.有没有办法强制砌体将物品从左到右依次按垂直方向垂直放置？
我试图张贴插图,但显然我没有资格这样做.这里有一个图示的链接：
解决方法
在Masonry中没有选择排序项目,因为它是一个简单的插件,将砖块逐个放置.选择新的砖头位置很简单：尽可能地放置更高的位置.
但是,在这种情况下可以做的是通过添加一个定义排序的两行来改变脚本,假设所有砖块的宽度相同(例如,总共为5行).
为了演示这个,我使用jQuery Masonry(被压缩),你可以在this Fiddle中查看.
JS
$.Mason.prototype._placeBrick = function(e) {
var n = $(e),r,i,s,o,u;
r = Math.ceil(n.outerWidth(!0) / this.columnWidth),r = Math.min(r,this.cols);
if (r === 1) s = this.colYs;
else {
i = this.cols + 1 - r,s = [];
for (u = 0; u < i; u++) o = this.colYs.slice(u,u + r),s[u] = Math.max.apply(Math,o)
}
var a = Math.min.apply(Math,s),f = 0;
for (var l = 0,c = s.length; l < c; l++)
if (s[l] === a) {
f = l;
break
}
/* Add new calculation,what column next brick is in: */
f = $(e).index() % this.cols; /* Get col index f: Just divide with element's index */
a = s[f]; /* This is current height for f-th column */
/* END of customizing */
var h = {
top: a + this.offset.y
};
h[this.horizontalDirection] = this.columnWidth * f + this.offset.x,this.styleQueue.push({
$el: n,style: h
});
var p = a + n.outerHeight(!0),d = this.cols + 1 - c;
for (l = 0; l < d; l++) this.colYs[f + l] = p;
};