我知道这很旧,但我遇到了同样的问题,并在我的谷歌搜索中发现了这篇文章。我能够通过稍微修改库来解决这个问题。修改 Masonry.prototype._getItemLayoutPosition 函数如下(不要忽略 //position the brick 和 //apply setHeight 下的变化):
Masonry.prototype._getItemLayoutPosition = function( item, count ) {
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 );
// get the minimum Y value from the columns
var minimumY = Math.min.apply( Math, colGroup );
var shortColIndex;
if (this._getOption('alignLTR') == true)
{
shortColIndex = count - ((Math.floor(count / colGroup.length) * colGroup.length));
}
else {
shortColIndex = colGroup.indexOf(minimumY);
}
// position the brick
var position = {
x: this.columnWidth * shortColIndex,
y: colGroup[shortColIndex]
};
// apply setHeight to necessary columns
var setHeight = colGroup[shortColIndex] + item.size.outerHeight;
var setSpan = this.cols + 1 - colGroup.length;
for ( var i = 0; i < setSpan; i++ ) {
this.colYs[ shortColIndex + i ] = setHeight;
}
return position;
};
您还必须修改调用此函数的循环,以便在遍历它们时传递每个项目的计数。
proto._layoutItems = function( items, isInstant ) {
this._emitCompleteOnItems( 'layout', items );
if ( !items || !items.length ) {
// no items, emit event with empty array
return;
}
var queue = [];
var itemCount = 0;
items.forEach( function( item, itemCount ) {
// get x/y object from method
var position = this._getItemLayoutPosition( item, itemCount );
itemCount++;
// enqueue
position.item = item;
position.isInstant = isInstant || item.isLayoutInstant;
queue.push( position );
}, this );
this._processLayoutQueue( queue );
};
最后,您必须在创建网格时将新选项“alignLTR”设置为 true。
var $grid = $('#myGrid').masonry({
isAnimated: true,
itemSelector: '.my-item',
alignLTR: true
});