砌體佈局無法達到預期效果

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