tumblr 和 google+ 如何像拼圖一樣堆疊圖像？

Question

我想制作一個圖片庫，並且想知道如何像 Google 和 tumblr 那樣堆疊圖片。

我的意思是，當你查看 tumblr 的存檔頁面時，它們都堆疊在列中： http://the-overlook-hotel.tumblr.com/archive

但是我希望它們也跨列重疊，我在 tumblr 上的一個名為 tessellate 的主題中看到了這一點： http://www.tumblr.com/theme/30524

這是一個例子。 繼續滾動以查看圖像或嵌入視頻將 go 橫跨 2 列的部分： http://idotessellate.tumblr.com/ （抱歉，我找不到更好的示例）

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

這種東西有名字嗎？ 我怎樣才能實現它或者我在哪里可以得到這些結果

就好像他們坐在彼此身上一樣。

Answer 1

Tumbler 似乎使用 Javascript 來計算圖像的布局。 頁面加載后，它為每個圖像設置一個絕對值 position。 如果調整 window 的大小，則重新計算每個圖像的 position。

谷歌似乎已經預先訂購了圖像，因此它們可以使用 float:left 很好地組合在一起。 您會注意到，除了第一張圖片外，其他圖片都是按行排列的。 當您調整瀏覽器大小時，圖像會擴大或縮小以保持布局。

要自己執行此操作，請查看jQuery Masonry 插件。