我在寻找使图像的画廊和我想知道如何堆叠像谷歌的图像和tumblr做。

I'm looking to make a gallery of images and am wanting to know how to stack images like Google and tumblr do.

当你看到tumblr他们都堆放在列的档案网页上我的意思是：的 http://the-overlook-hotel.tumblr.com/archive

what I mean by that is when you look on an archive page of tumblr they are all stacked in columns: http://the-overlook-hotel.tumblr.com/archive

不过，我希望他们也有重叠跨列，我已经看到了在tumblr主题叫做镶嵌完成这件事：的 http://www.tumblr.com/theme/30524

However I want them to also overlap across columns, I've seen this done in a theme on tumblr called tessellate: http://www.tumblr.com/theme/30524

它的下面有一个例子。保持滚动看到的部分，其中的图像或嵌入视频将在2个列去： http://idotessellate.tumblr.com/ （抱歉，我不能找到一个更好的例子）

heres an example of it. keep scrolling to see sections where an image or embedded video will go across 2 columns: http://idotessellate.tumblr.com/ (sorry i couldn't find a better example)

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

Google does something similar on Google+ photo pages: https://plus.google.com/u/0/photos/111395306401981598462/albums/5678415422536656161

没有这种类型的事情有名字吗？我怎么能实现它，或者我在哪里可以看得到这些结果

does this type of thing have a name? how can I achieve it or where can I look to get these results

及其好像他们在坐在彼此

Its as if they are sat on each other.

推荐答案

不倒翁似乎使用Javascript来计算图像的布局。加载页面之后，它设置用于每一图象的绝对位置。如果调整窗口的大小，每个图像的位置被重新计算。

Tumbler appears to be using Javascript to calculate the layout of the image. After the page is loaded, it sets an absolute position for each image. If you resize the window, the position of each image is recalculated.

谷歌似乎有pre-下令图像，以便将它们组合在一起很好地利用浮动：左。你会发现，除了第一个图像，图像被排列行。当调整broswer，图像放大或缩小，以保持布局。

Google appears to have pre-ordered the images so they fit together nicely using float: left. You'll notice, with the exception of the first image, the images are ordered in rows. When you resize the broswer, the images grow or shrink to keep the layout.

要做到这一点你自己，看看在 jQuery的砌体插件。

To do this yourself, take a look at the jQuery Masonry plugin.