JQueryMasonry

Homepage: http://desandro.com/resources/jquery-masonry
Author(s): David DeSandro
Version: 1.0.0

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.

Screenshot

jQuery-Masonry.jpg

Usage

JavaScript API

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 });

Foswiki integration

All containers classified as jqMasonry will be processed by this plugin. Options can be specified using JQueryMetadata.

Options

Examples

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

Sit amet mi ullamcorper vehicula

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

Sit amet mi ullamcorper vehicula

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

Sit amet mi ullamcorper vehicula

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

Sit amet mi ullamcorper vehicula

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.


Attach
jpg
Saved by install script
version 1 uploaded by AdminUser on 30 Apr 2010 - 17:24
spacer