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

Question

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

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

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

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 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.

Answer 1

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.

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.

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