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.
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.
©2020 All rights reserved.