砌体布局无法达到预期效果

Question

我真的很难倒在这里。由于这是一个布局问题，您需要查看我的codepen example。

基本上，如果你看到第二排，两块之间有一个巨大的空间。为什么？它为什么不排队？

这是砖石的选项：

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

另外，拨弄第三栅极项的宽度。理想情况下，我希望它是50％，我的所有div都会合在一起，紧紧包装。我有自定义宽度的原因是它将最大宽度移动到下一行之前是40％。为什么？它需要在同一行。 50％+ 50％= 100％所以有空间。你为什么认为它坏了？

1）jQuery插件https://github.com/desandro/masonry

Answer 1

的空间是有因为columnWidth时为20％，但第一项是50％。 50％的项目四舍五入到60％。所以有10％的额外空间。

但是如果你改变.grid-sizer {width：10％; }这将允许50％的项目被测量为50％。