jQuery 砌体物品堆叠顺序错误

Question

很难描述，但 this codepen 应该有助于说明问题。

根据我的设置，物品的堆叠顺序很明显是错误的。

大多数项目的宽度为 33%，但我在顶部有一些 50% 宽度的项目。我首先使用 spacer 项来定义正确的尺寸。

出于某种原因，这 50% 的物品被堆叠在一起，而显然它们并排放置的空间非常明显。即使我将它们的宽度减小到 45%，它也会这样做 - 那里肯定 space 让它们并排坐着。

这似乎是 Masonry 的一个实际错误，我已经记录了他们的问题，但没有收到任何回复。谁能看出为什么这不起作用？或者提供修复？或者知道解决方法？谢谢！

供参考，这里是代码：

<div class="grid">
  <div class="grid-item grid-item--sizer"></div>
  <div class="grid-item grid-item--width2">1</div>
  <div class="grid-item grid-item--width2">2</div>
  <div class="grid-item grid-item--width2">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

CSS:

* {
  box-sizing: border-box;
}

.grid {
  background: #EEE;
  max-width: 480px;
  margin:0 auto;
}

.grid-item {
  width: 160px;
  height: 120px;
  float: left;
}

.grid-item--sizer {
  height: 0;
}

.grid-item--width2 {
  width: 240px;
}

JS:

$('.grid').masonry({
  itemSelector: '.grid-item'
});

Answer 1

我认为 Masonry 布局基于 columnWidth 参数，所有网格元素的宽度都应该是 columnWidth 的倍数。在您的情况下，这意味着有 80 像素的基列。

删除您的 sizer 元素（不需要它），并将您的砌体调用更改为：

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

jQuery 砌体物品堆叠顺序错误

jQuery Masonry items stacking in wrong order

javascript

jquery

jquery-masonry

masonry