html/javascript/css中的打包圖像流

Question

我想在HTML頁面放置一些未知數（通常在3到9之間）的圖像或不同的寬度和高度。 排列圖像的順序並不特別重要。

當我用css float和clear：none等簡單地做到這一點時，結果往往是次優的，導致大的空白區域沒有被填滿。

是否有一些算法和方法來控制圖像集合的包裝，以最大限度地減少空白或不吸引人的外觀？

如果我有一個很好的算法，我想我可以在加載html頁面和圖像後使用javascript + css來排列圖像。

感謝，

Answer 1

如果你不反對使用jQuery，砌築插件會做什麼這聽起來像你描述。

砌體是jQuery的動態網格佈局插件。把它看作是CSS浮動的另一面。而浮動水平然後垂直排列元素，砌體垂直排列元素，將每個元素放置在網格中的下一個開放點。結果可以最大限度地減少不同高度元素之間的垂直間隙，就像石匠在牆上鑲嵌石塊一樣。

http://masonry.desandro.com/

Answer 2

另一個jQuery插件要考慮的是Isotope。