如何動態創建拼圖（沒有間隙的網格）圖像，其中圖像具有不同的高度？

我想顯示一頁縮略圖。縮略圖是用戶上傳的藝術作品圖片。每張圖片都有一個約束寬度，但不是約束高度，這是爲了顯示完整圖像而不進行任何裁剪。如何動態創建拼圖（沒有間隙的網格）圖像，其中圖像具有不同的高度？

我希望圖像彼此對接，沒有間隙。列數不固定：如果我展開或調整頁面大小，圖像應該流入正確的列數。

float:left

幾乎是我想要的。除了當有在頁面我得到這個跳空顯得高挑圖片：

enter image description here

如何消除差距？

2011-06-30 Homan

你可以連續定義4個不同的表（每個一列）:) –

爲了得到你想要的樣子，你將不得不使用絕對定位。您可以編寫自己的腳本，也可以使用所提示的插件。 – jchavannes

如果你想在CSS中做到這一點，只有你必須爲每一列創建div，並浮動這些列（但它擾亂了圖像的順序）。

或者，您可以使用像this one這樣的jquery插件。

2011-06-30 21:18:06 Litek

謝謝。砌石插件做我想要的。除了我會更喜歡原來的順序從左到右每一行。砌體爲第一排做到這一點，但對於第二排，它似乎隨意適合下一張圖像，以便找到最大的差距。儘管通常情況下，您仍然可以將訂單作爲「靠近」頂部的第一個訂單，但不一定是從左到右。 – Homan

避免弄亂圖像的可能性是有一個計數器，每隔四張圖像將其發佈到特定的div中。所以你有這個計數器和一個while語句1,2,3和4 ....當數字命中1，你加入div 1，等等，當它命中4時，你只需將數字加回到0 :)問題解決了！ – 2014-03-08 21:51:07

不知道你需要你的CSS多麼優雅，但是一個不錯的選擇。你可以使用masonry.js來幫助你。

2012-02-25 13:20:48 onefastsnail

這應該是選擇的答案！ – vsync

我知道你前一段時間回答了這個問題，但是你有沒有想過一種方法來顯示從左到右而不是從上到下的圖像？ – SISYN

回答