jQuery Masonry项目以错误的顺序堆叠

Question

很难描述，但this codepen应该有助于使事情变得清楚。

使用我的设置，很明显，物品以错误的顺序堆叠。

大多数项目的宽度为33％，但顶部有50％的宽度。我首先使用间隔物，以定义正确的尺寸。

由于某种原因，当有50％的物品可以并排放置时，它们会彼此堆叠在一起。即使我将其宽度减小到45％，也可以做到这一点-在这种情况下，他们可以并排坐着。[]

这似乎是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'
});
    

很难描述，但是此Codepen应该有助于使事情变得清晰。通过我的设置，很明显，物品以错误的顺序堆叠。大多数项目的宽度为33％，但我在...处有一些50％的宽度...

Answer 1

我认为砌体布局基于columnWidth参数，并且所有网格元素的宽度均应为columnWidth的倍数。在您的情况下，这意味着具有80px的基本列。