jQuery，砌体堆叠？

Question

我对我的网站提供了一些帮助： http://www.lovejungle.com/dev/testenvironment/?cat=5

我的印象是jQuery Masonry紧紧地堆放了这些物品 - 出于某些原因，当我随机化div盒时，我在它们之间得到了很大的开放空间？

有人能看出为什么会这样吗？

基本上我打算为此创建一个类似的网站：http://www.jwt.com/

如果您需要任何代码或更多信息，请告诉我，我会及时回复！

干杯！

迈克尔

Answer 1

从jQuery Masonry网站引用：

  

将其视为CSS的另一面   彩车。浮动安排   元素水平然后垂直，   砌体垂直排列元素   然后根据网格水平。

所以，基本上，只有当所有元素的 width 保持不变时，你的元素才能很好地适应。正如所有元素的高度相同，浮动如何很好地适合。您可以在您提到的网站上观察此效果：http://www.jwt.com/其中所有堆叠元素的宽度相同。 ：）

HTH。

---

编辑：这也意味着您的元素的宽度可以是网格中其他元素的倍数。你可以拥有一个大于正常元素宽度3倍的元素。

Answer 2

我不得不说我并不完全熟悉Masonary如何在内部工作，但我在您的网站上注意到有两件事可能有助于解决这个问题：

1. 我注意到您的列编号为col2 - col4。在您的javascript中，您将columnWidth属性指定为200px，这意味着每个列的宽度都是200的倍数。我不确定源是否假定col1将为200，col2将为400等。所以，也许尝试将列编号从col1而不是col2开始。

2. 我注意到您的列宽度不是200像素或精确倍数。你需要margin + padding + width为200.从你的CSS看起来似乎不是这种情况，如下例所示：

col2的：

宽度= 170px 填充框= 10px 你在js = 10px

中添加一个保证金

这会给你

170 + 10 + 10 + 10 + 10 = 210px

其他列也是如此。

我并不是说修复上述两个问题会解决您遇到的问题，但值得一试。