Tumblr和google+如何像拼图一样堆叠图像

How does tumblr and google+ stack images like a puzzle?

本文关键字：一样图像 google+ 何像拼图 Tumblr 更新时间：2023-09-26

我想制作一个图片库，想知道如何像谷歌和tumblr那样堆叠图片。

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

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

下面是一个示例。继续滚动以查看图像或嵌入的视频将跨越 2 列的部分： http://idotessellate.tumblr.com/（对不起，我找不到更好的例子）

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

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

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

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

谷歌似乎已经预订了这些图像，因此它们使用float：left很好地组合在一起。您会注意到，除了第一张图像外，图像是按行排序的。调整浏览器大小时，图像会增大或缩小以保持布局。

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