JQueryMasonry

Screenshot

Usage

JavaScript API

$('#wrapper').masonry({ columnWidth: 200 });

Foswiki integration

<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

• 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