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

Posted 2023-03-06

【中文标题】如何动态创建图像的拼贴（没有间隙的网格），其中图像具有不同的高度？

【英文标题】：How do I dynamically create a collage (grid with no gaps) of images, where images have different heights?

【发布时间】：2011-09-26 07:58:26

【问题描述】：

我想显示一页缩略图。缩略图是用户上传的艺术品图像。每张图片都有一个限制的宽度，但没有限制的高度，这是为了显示完整的图像而不进行任何裁剪。

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

float:left

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

如何消除差距？

【问题讨论】：

您可以连续定义 4 个不同的表（每个表有一列）:)

要获得您想要的外观，您将不得不使用绝对定位。您可以编写自己的脚本或使用建议的插件。

【参考方案1】：

不确定您需要多优雅的 CSS，但仍然是一个不错的选择。你可以使用 masonry.js 来帮助解决这个问题。

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

【讨论】：

这应该是选择的答案！

我知道你刚才回答了这个问题，但你有没有想过一种方法可以从左到右而不是从上到下显示图像？

【参考方案2】：

如果您只想在 css 中执行此操作，您必须为每一列创建 div，并浮动这些列（但它会打乱图像的顺序）。

或者，您可以使用 jquery 插件，例如 this one。

【讨论】：

谢谢。砌体插件做我想要的。除了我更喜欢原始顺序从左到右向下每行。 Masonry 对第一行执行此操作，但对于第二行，它似乎任意地适合下一个图像，以便按顺序排列到它可以找到的最大间隙中。虽然通常你仍然会得到第一个“靠近”顶部的顺序，但不一定是从左到右。

一个避免弄乱图像的可能性是有一个计数器，每四张图像你就将它张贴在特定的 div 中。所以你有这个计数器和一个while语句去1,2,3和4....当数字达到1时，你添加到div 1，依此类推，当它达到4时，你只需将数字加回0 :) 问题解决了！