如何动态创建图像拼贴（无间隙网格），图像具有不同的高度？

Question

我想显示一个缩略图页面。缩略图是用户上传的图稿图像。每张图片都有一个受约束的宽度，但不是受约束的高度，这是为了显示整个图像而不进行任何裁剪。

我希望图像能够相互对接，两者之间没有间隙。列数不固定：如果我展开页面或调整页面大小，图像应该流入正确的列数。

float:left

几乎是我想要的。除非页面中有高大的图像，否则我会看到这个缺口：

如何消除差距？

Answer 1

不确定你需要你的CSS有多优雅，但也是一个不错的选择。您可以使用masonry.js来帮助它。

http://css-tricks.com/seamless-responsive-photo-grid/

Answer 2

如果你想在css中这样做，你只需要为每一列创建div，并浮动那些列（但它会影响图像的顺序）。

或者，您可以使用this one之类的jquery插件。