html / javascript / css格式的压缩图像流

Question

我想把一些未知的数字(通常在3和9之间)的图像或不同的宽度和高度的HTML页面。图像的排列顺序并不是特别重要。

当我简单地使用css float和clear:none等执行此操作时，结果通常不是最优的，导致大量空白区域未被填充。

是否有一些算法和方法来控制图像集合的打包，以最小化空白或其他不吸引人的外观？

如果我有一个很好的算法，我想我可以在加载html页面和图像后使用javascript+css来排列图像。

谢谢,

Answer 1

如果您不反对使用jQuery，那么Masonry插件将完全按照您所描述的那样工作。

Masonry是一个用于jQuery的动态网格布局插件。可以把它想象成CSS浮动的另一面。浮动先水平排列元素，然后垂直排列元素，而Masonry则垂直排列元素，将每个元素定位在网格中的下一个开放位置。结果最小化了不同高度的元素之间的垂直间隙，就像泥瓦匠在墙上安装石头一样。

http://masonry.desandro.com/

Answer 2

另一个需要考虑的jQuery插件是Isotope。