J Query Masonry

Homepage: http://masonry.desandro.com
Author(s): David DeSandro
Version: 3.3.2

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You've probably seen it in use all over the Internet.

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

Foswiki integration

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

<div class="jqMasonry" data-item-selector=".grid-item">
   <div class="grid-item">...</div>
   <div class="grid-item">...</div>
   <div class="grid-item">...</div>
...
</div>

Options

All options are optional, but columnWidth and itemSelector are recommended.

• columnWidth: 240
  Width of a column of your grid, specified as an integer, an element selector, or a dom node. default: outer width of the first element of the grid
• itemSelector: '.grid-item'
  selector to specify which elements inside the wrapping element will be rearranged.
• gutter: 0
  Adds horizontal between item elements (to set vertical space between elements use css margin), specified as an integer or an element selector
• percentPosition: false
  if set to true integer values in columnWidth and gutter will be in percentage instead of in pixel
• stamp: 'item selector'
  Specifies which elements are stamped within the layout. Masonry will layout items below stamped elements.
• isFitWidth: false
  If enabled, Masonry will size the width of the container to the nearest column. When enabled, Masonry will measure the width of the container's parent element, not the width of the container. This option is ideal for centering Masonry layouts.
• isOriginLeft: true
  Controls the horizontal flow of the layout. By default, item elements start positioning at the left, with isOriginLeft: true. Set isOriginLeft: false for right-to-left layouts.
• isOriginTop: true
  Controls the vertical flow of the layout. By default, item elements start positioning at the top, with isOriginTop: true. Set isOriginTop: false for bottom-up layouts. It's like Tetris!
• containerStyle: {position:relative}
  CSS styles that are applied to the container element, set to null to disable any css
• transitionDuration: '0.4s' Duration of the transition when items change position or appearance, set in a CSS time format.
• isResizeBound: true
  Adjusts sizes and positions when window is resized.
• isInitLayout: true
  Set isInitLayout: false to disable layout on initialization, so you can use methods or add events before the initial layout.

Examples

See more demos at http://masonry.desandro.com/