jQuery，砌體堆砌？

Question

我一點幫助，我的網站後： http://www.lovejungle.com/dev/testenvironment/?cat=5

我的印象是，jQuery的砌體堆疊的對象緊密 - 由於某種原因，當我隨機他們之間的格框的，我得到很大的開放空間？

任何人都可以看到爲什麼會發生這種情況嗎？

基本上我希望創建一個類似的網站，這一個：http://www.jwt.com/

讓我知道如果你需要任何代碼或瞭解更多信息，我會及時回覆！

乾杯！

邁克爾

Answer 1

從jQuery Masonry網站報價：

把它看作CSS 花車的另一面。而浮動水平然後垂直排列 元素， 砌體垂直排列元素 然後水平根據網格。

所以，基本上，你的內容將很好地適應只有當所有的元素寬度保持不變。就像float如何很好地吻合，如果所有元素的高度相同。您可以在您提到的網站上觀察到這種效果：http://www.jwt.com/其中所有堆疊的元素具有相同的寬度。 :)

HTH。

---

編輯：這也意味着你的元素可以是在網格中的其他元素的倍數寬度。你可以有一個大的元素，它是普通元素寬度的3倍。

Answer 2

我必須說，我不完全熟悉磚石內部是如何工作的，但有一些我已經在網站上發現兩件事情可能與此問題的幫助：

1. 我注意到，您的列編號爲col2 - col4。在你的javascript中，你指定你的columnWidth屬性爲200px，這意味着每一列的寬度都是200的倍數。我不確定源是否假設col1是200，col2是400等。 。所以，也許嘗試編號你的列從col1開始，而不是col2。

2. 我注意到，你的列不是完全200像素的寬度或一個確切的倍數。你需要margin + padding + width爲200。從你的CSS似乎這是不是可以從下面的例子可以看出的情況：

col2的：

寬度= 170像素 填充上盒= 10px的 你在JS添加保證金= 10px的

這給你

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

同樣是真實的其他專欄也是。

我並不是說修復上述兩個問題可以解決您遇到的問題，但值得一試。