如何在Pinterest上布局照片

时间:2013-06-03 18:43:49

标签: layout styles pinterest

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

然而,我尝试了各种类型的显示样式选项,以便如果让我们说页面上的第一个图像非常高,那么第二行图像就不会全部按下了。据我所知,第2行的第一张图像显然必须出现在第1行高大的第一张图像下方,但其他图像不应该也要按下。即使图像不高,如果第一行的第一张图像上有注释,那么整个第二行将从第一行的第一张照片开始。

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

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

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

1 个答案:

答案 0 :(得分:1)

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

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