8 years ago
538 Views
0 0

Masonry – jQuery plugin for Layout

Written by

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.

Masonry - jQuery plugin for Layout

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

Article Categories:
jQuery Plugins

Comments

wonderful comments!