在目录站点上使用石工。默认情况下,显示的项目按日期排序,然后按零件号排序。我的图像高度不一。问题是,如果我错了,请纠正我,Masonry将第2行的项目1设置在第1行中最短的项目下方,而不是在页面的左侧。因此,换句话说,当我的数据库返回某个订单时,Masonry将这些项目从上到下(当高度变化时)而不是从左到右排列。
我在文档中找不到任何可控制的内容。有没有一种方法可以迫使砌体保持物品从左到右的顺序,并根据高度垂直 float ?
我试图发布插图,但是显然我没有资格发表插图。这是插图的链接:
最佳答案
受Billy的答案(以及skobaljic的答案:)的启发),我只是更改了shortColIndex和minimumY的初始化以实现此行为。使用colGroup的大小,可能会更容易一些,而且具有不同列数的响应式布局仍然可以工作。
这是v3.3.2的完整代码:
Masonry.prototype._getItemLayoutPosition = function( item ) {
item.getSize();
// how many columns does this brick span
var remainder = item.size.outerWidth % this.columnWidth;
var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
// round if off by 1 pixel, otherwise use ceil
var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
colSpan = Math.min( colSpan, this.cols );
var colGroup = this._getColGroup( colSpan );
// ### HACK: sort by natural order, not by min col height
// get the minimum Y value from the columns
// var minimumY = Math.min.apply( Math, colGroup );
// var shortColIndex = utils.indexOf( colGroup, minimumY );
var shortColIndex = jQuery(item.element).index() % colGroup.length;
var minimumY = colGroup[shortColIndex];
// position the brick
var position = {
x: this.columnWidth * shortColIndex,
y: minimumY
};
// apply setHeight to necessary columns
var setHeight = minimumY + item.size.outerHeight;
var setSpan = this.cols + 1 - colGroup.length;
for ( var i = 0; i < setSpan; i++ ) {
this.colYs[ shortColIndex + i ] = setHeight;
}
return position;
};
关于jQuery Masonry是从左到右而不是从上到下的排序顺序?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17535498/