Question

我正在与Masonry合作而没有得到预期的结果。

为什么5号箱子没有移动到3号右侧的右上角？那里有足够的空间，据我所知，这就是砌体所做的。

另外，如果我使用css更改某些方框的高度，例如：

.grid__item:nth-child(odd)
 {
   height: 100px;
 }

它显示了同样的问题，并非所有的白色空间都装满了装配盒。

编辑：通过在Macsupport的评论之后加入jQuery来更新Pen（感谢抬头！）并且问题已经解决了第一种情况，但是，它在我的项目中没有解决，所以我更新了笔以反映通过使用大小的百分比值，我的项目更好。现在我有同样的问题 - 5不会紧挨着3 ...

编辑2：如果我尝试使用更多列，我可以让它工作，所以问题出在2列布局中。它不是四舍五入 - 我已经测试了49.5％宽度甚至45％ - 一旦有2列打算，网格似乎就会中断。是不是有2列布局？即使我使用绝对值（无％），2列布局也会中断。

Answer 1

您使用jQuery调用masonry但是您没有在您的codepen中加载jQuery，因此砌体失败并出现错误。它需要在砌筑之前加载。

Answer 2

我还咨询了Masonry插件的所有者，显然这个问题＆＃39;是正常的行为 - 我引用：

＆＃34;在砌体布局中可能出现间隙。如果您希望填充这样的空白，请使用Packery。＆＃34;

事实上，在这种情况下，Packery确实为我提供了一个结果，也是在2列布局中填充网格（3个或更多列布局/断点已经在Masonry中正常工作），所以我要去与Packery在这一个。