The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
Masonry
NOTE 19 May 2010 jQuery Plugins will no longer have the latest release of the Masonry plugin. Please refer to the jQuery Masonry homepage for latest documentation, releases, and demos. jQuery Masonry repository on GitHub.
Masonry is a 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 then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
Minimum recommended configuration
Configuring Masonry is fairly easy. 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 });
