jQuery Masonry 排序顺序从左到右而不是从上到下？

Question

在目录站点上使用 Masonry。默认情况下，显示的项目按日期排序，然后按部件号排序。我的图像高度不同。问题是，如果我错了，请纠正我，Masonry 将第 2 行第 1 项设置在第 1 行中最短的项下方，而不是在页面左侧。换句话说，当我的数据库返回特定顺序时，Masonry 将这些项目从上到下(当高度不同时)放置，而不是从左到右。

我在文档中没有找到任何可以控制这一点的内容。有没有办法强制 Masonry 将项目从左到右按顺序排列，并根据高度垂直 float ？

我试图发布一个插图，但显然我没有资格这样做。这是插图的链接:

Answer 1

受到 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;
};