layout - 如何像 Pinterest 上那样布局照片

Question

我创建了一个网站，用户可以在其中上传照片，并且用户可以对照片发表评论。我的网站主页上显示了大约 12 张左右的照片，按日期排列。

但是，我尝试了每种类型的显示样式选项来获取它，这样如果页面上的第一个图像非常高，则第二行图像不会全部被推低。我知道第二行的第一张图像显然必须出现在第一行高的第一张图像下方，但其他图像也不应该被推下来。即使图片不高，如果第一行的第一张图片有评论，那么整个第二行都会从第一行的第一张照片下方开始。

当我查看 Pinterest 网站时，他们似乎已经解决了这一问题，并且不会因一张照片结果太高而浪费不必要的空间。其他行中的其他人似乎使用了所有空间，这正是我想要实现的目标。

目前我正在使用 display:inner-table 但它并没有真正达到我想要的效果，尽管它比其他一些选项稍好一些，这些选项有时会在结果中产生空白跳过的空格。实现此目的的唯一方法是使用包含 4 列的表格并在打印到页面之前预填充这些列吗？

请原谅我的愚蠢。感谢您的帮助!

Answer 1

使用 jQuery 解决您的问题，让您的生活变得更轻松。查看这个 jQuery 插件:

• Masonry
• Isotope

在这里了解它们之间的区别:Differences between Isotope and Masonry jQuery plugins