How do we make a dynamic photo gallery that adjusts both vertical and horizontal spaces?

I am looking for something like this........

If it is only in the horizontal direction then float:left would do the trick.... but if we want an element to take up the vertical space whenever possible, then ho开发者_开发知识库w do we do it? Be it an image or any DOM element, how do we get this type of alignment dynamically?

Please go through the Jquery Masonry plugin. It is designed to address exactly this issue.

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

URL: http://masonry.desandro.com

A jQuery plugin called Masonry is designed to handle this sort of thing.