4

我正在寻找制作图片库,并且想知道如何像 Google 和 tumblr 那样堆叠图片。

我的意思是,当您查看 tumblr 的存档页面时,它们都堆叠在列中: http: //the-overlook-hotel.tumblr.com/archive

但是我希望它们也可以跨列重叠,我在 tumblr 上的一个名为 tessellate 的主题中看到了这一点:http ://www.tumblr.com/theme/30524

这是它的一个例子。继续滚动以查看图像或嵌入视频将跨越 2 列的部分:http: //idotessellate.tumblr.com/ (抱歉我找不到更好的示例)

Google 在 Google+ 照片页面上做了类似的事情:https: //plus.google.com/u/0/photos/111395306401981598462/albums/5678415422536656161

这种东西有名字吗?我怎样才能实现它或我在哪里可以得到这些结果

就好像他们坐在一起一样。

4

1 回答 1

9

Tumbler 似乎正在使用 Javascript 来计算图像的布局。页面加载后,它为每个图像设置一个绝对位置。如果调整窗口大小,则会重新计算每个图像的位置。

谷歌似乎已经预购了这些图片,所以它们使用 float:left 很好地结合在一起。您会注意到,除了第一张图片之外,这些图片都是按行排列的。当您调整浏览器大小时,图像会放大或缩小以保持布局。

要自己执行此操作,请查看jQuery Masonry 插件

于 2012-04-11T02:40:13.343 回答