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

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

• singleMode: false
  Disables measuring the width of each floated element. Set to true if floated elements have the same width. default: false

• columnWidth: 240
  Width in pixels of 1 column of your grid. default: outer width of the first floated element.

• itemSelector: '.box:visible'
  Additional selector to specify which elements inside the wrapping element will be rearranged.

• resizeable: true
  Binds a Masonry call to window resizes. default: true

• appendedContent: $('.new_content')
  Additional container element for appended content. Useful for Infinite Scroll integration.

• saveOptions: true
  Masonry will use the options from previous Masonry calls by default, so you only have to enter in options once default: true

Examples