CSS 如何动态创建图像的拼贴（没有间隙的网格），其中图像具有不同的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6541078/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I dynamically create a collage (grid with no gaps) of images, where images have different heights?
提问by Homan
I want to display a page of thumbnails. The thumbnails are user uploaded artwork images. Each image has a constrained width, but not a constrained height, this is to show the full image without any cropping.
我想显示一页缩略图。缩略图是用户上传的艺术作品图像。每个图像都有一个受约束的宽度，但没有一个受约束的高度，这是为了显示没有任何裁剪的完整图像。
I want the images to butt up against each other with no gaps in between. The number of columns is not fixed: If I expand or resize the page the images should flow into correct number of columns.
我希望图像相互对接，中间没有间隙。列数不固定：如果我扩展或调整页面大小，图像应该流入正确的列数。
float:left
is ALMOST, what I want. Except when there are tall images in the page I get this gapped look:
几乎是我想要的。除非页面中有高大的图像，否则我会看到这种间隙：
How do I eliminate the gaps?
如何消除间隙？
采纳答案by Litek
回答by onefastsnail
Not sure how graceful you need your CSS, but a good option none the less. You could use masonry.js to help that.
不确定您需要多么优雅的 CSS，但仍然是一个不错的选择。你可以使用 masonry.js 来帮助它。
