我正在为我的网站寻求一些帮助： http://www.lovejungle.com/dev/testenvironment/?cat=5
我的印象是 jQuery Masonry 将对象紧紧地堆叠在一起 - 出于某种原因，当我随机化 div 框时，它们之间会出现很大的开放空间？
谁能明白为什么会这样？
基本上我希望创建一个与此类似的网站：http://www.jwt.com/
如果您需要任何代码或更多信息，请告诉我，我会及时回复！
干杯！
迈克尔
【问题讨论】：
引自jQuery Masonry网站：
将其视为 CSS 的另一面 浮动。而浮动安排 元素水平然后垂直， 砌体垂直排列元素 然后根据网格水平。
所以，基本上，只有当所有元素的 width 保持相同时，你的元素才会很好地适应。如果所有元素的高度都相同，就像 float 会很好地适应一样。您可以在您提到的站点上观察到这种效果：http://www.jwt.com/，所有堆叠的元素都具有相同的宽度。 :)
HTH。
编辑： 这也意味着您的元素的宽度可以是网格中其他元素的倍数。您可以拥有一个大元素，其宽度是普通元素的 3 倍。
【讨论】：
我不得不说我并不完全熟悉 Masonary 内部的工作方式，但我注意到您网站上的两件事可能有助于解决这个问题：
我注意到您的列编号为 col2 - col4。在您的 javascript 中，您将 columnWidth 属性指定为 200px，这意味着每个列的宽度都是 200 的倍数。我不确定来源是否假定 col1 为 200，col2 为 400，等等。 . 所以，也许尝试从 col1 而不是 col2 开始对列进行编号。
我注意到您的列的宽度不完全是 200 像素，也不是精确的倍数。您需要边距 + 填充 + 宽度为 200。从您的 CSS 看来，情况并非如此，从以下示例中可以看出：
Col2：
宽度 = 170 像素 框内边距 = 10px 您在 js = 10px 中添加边距
这给了你
170 + 10 + 10 + 10 + 10 = 210 像素
其他列也是如此。
我并不是说修复以上两个就可以解决您遇到的问题，但值得一试。
【讨论】：