在目录站点上使用石工。默认情况下,显示的项目按日期排序,然后按零件号排序。我的图像高度不一。问题是,如果我错了,请纠正我,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/

10-09 18:08