很难描述，但这段代码应该可以让事情变得更清楚。

在我的设置中，项目很明显堆放的顺序不对。

大多数项目是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>

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'
});