Masonry – jQuery plugin for Layout

Masonry is an jQuery plugin for Layout that allow you to rearranges CSS elements vertically then horizontally according to a grid. The result is minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

The plugin is almost totally work with all structural elements: div’s, lists, p’s, spans and uses jQuery’s outerWidth() and innerWidth() methods to calculate the margins & padding of elements. it very easy to use, Simply attach the .masonry() method to the wrapping container element in your jQuery script. Depending on the layout, you’ll most likely need to specify one option.

For layouts with elements that span multiple widths:

$('#wrapper').masonry({ columnWidth: 200 });

For layouts with elements that span the same width:

$('#wrapper').masonry({ singleMode: true });

Download: Masonry layout plugin for jQuery