在砌体中始终左对齐

Question

我正在使用Masonry jQuery 插件来对齐项目网格。

这是我所拥有的：

预期行为：

我怎样才能达到这个效果？我尝试了各种选择，但没有任何效果。

这是我每个盒子的 HTML：

<div class="sa-visual-grid-item" id="sa-visual-grid-item-<?=$id?>">
    <div class="sa-selected-box"></div>
    <input type="hidden" name="selected[<?=$id?>]" value="1" />
    <img class="sa-img" src="<?=$img_url?>" />
    <div class="sa-desc">
        <div class="sa-name"><?=$name?></div>
        <div class="sa-price"><?=$price?></div>
    </div>
</div>

还有 CSS：

.sa-visual-grid {
    height: auto;
    margin: 0 auto;
    text-align: center;
}
.sa-visual-grid-item {
    background: white;
    float: left;
    width: 250px;
    padding: 15px;
    margin: 10px 15px;
    border: 1px solid #bbb;
    box-shadow: 0px 5px 15px 0px #efefef;
    cursor:pointer;
    text-align: center;
}
.sa-selected-box {
    display: none;
    position:absolute;
    z-index:100;
    border: 8px solid #00aa00;
    width:254px;
    padding:15px;
    margin-top:-25px;
    margin-left:-25px;
}

Answer 1

你不能。这是一种最有效地打包垃圾箱的算法。它不是为了好看而设计的。也许你可以试试 wookmark 插件。还有很多其他的。

Answer 2

我知道这是旧的，但我遇到了同样的问题，并在我的谷歌搜索中发现了这篇文章。我能够通过稍微修改库来解决这个问题。修改 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
        });

Answer 3

旧帖子，我知道，但这可能对其他人有帮助：

$('.grid').masonry({
    horizontalOrder: true
});

将它添加到我的 JS 文件后，网格项都左对齐了。

例子：

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 160,
  horizontalOrder: true
});

* { box-sizing: border-box; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #EEE;
  max-width: 1200px;
  counter-reset: grid-item;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 160px;
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}

.grid-item--width2 { width: 320px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 720px; }

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }

.grid-item:before {
  counter-increment: grid-item;
  content: counter(grid-item);
  display: block;
  color: white;
  padding-top: 0.2em;
  text-align: center;
  font-size: 1.4rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

<h1>Masonry - horizontalOrder</h1>

<div class="grid">
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height3"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height3"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height3"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>