3

我创建了一个网站,用户可以上传照片,用户可以对照片发表评论。这些照片显示在我网站的主页上大约 12 张左右,按 desc 日期排序。

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

当我查看 Pinterest 网站时,他们似乎已经弄清楚了这一点,并且没有因为一张照片结果太高而浪费不必要的空间。其他行中的其他人似乎使用了我想要实现的所有空间。

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

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

4

1 回答 1

1

使用 jQuery 来解决您的问题,让您的生活更轻松。看看这个 jQuery 插件:

在这里阅读它们之间的区别:Isotope and Masonry jQuery plugins之间的区别

于 2013-07-02T13:20:39.833 回答