Javascript jQuery砌体项目按错误顺序堆放

很难描述，但应该有助于把事情弄清楚

在我的设置中，物品显然是以错误的顺序堆放的

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

出于某种原因，50%的物品被堆叠在彼此的顶部，而此时显然有空间让它们并排放置。即使我把它们的宽度缩小到，比如说45%，也能做到这一点，因为这里绝对有空间让它们并排坐着

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

以下代码供参考：

<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>

JS:

---

我认为砌体布局基于

columnWidth

参数，所有网格元素的宽度都应该是

columnWidth

的倍数。在您的例子中，这意味着有80px的基本列

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

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

---

嗯，我没有想到列必须是公共基值的倍数——这是有道理的！实际上，我的列是响应性的，而不是固定的宽度，但是如果我只使用sizer元素宽度的一半，也可以实现同样的效果-非常感谢！

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

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