tumblr 和 google+ 如何像拼图一样堆叠图像？答案

【问题标题】：How does tumblr and google+ stack images like a puzzle?tumblr 和 google+ 如何像拼图一样堆叠图像？
【发布时间】：2012-04-23 07:55:17
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：