You are here: CTSPedia>System Web>JQueryPlugin>JQueryMasonry (14 Jul 2010, AdminUser?)EditAttach
Tags:
create new tag
, view all tags, tagging instructions

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

  • 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

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.


Topic attachments
I Attachment Action Size Date Who Comment
jpgjpg jQuery-Masonry.jpg manage 35.0 K 30 Apr 2010 - 10:24 AdminUser? Saved by install script
Topic revision: r3 - 14 Jul 2010 - 14:44:01 - AdminUser?
 
This site is powered by FoswikiCopyright & by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding CTSPedia? Send feedback