javascript - html/javascript/css 中的打包图像流

Question

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

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

是否有某种算法和方法来控制图像集合的打包，以尽量减少空白或其他不吸引人的外观？

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

谢谢，

Answer 1

如果您不反对使用 jQuery，Masonry 插件将完全按照您描述的方式进行操作。

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

http://masonry.desandro.com/