Skip to content
Element layout engine for Mootools
JavaScript
Find file
Latest commit 206982e Feb 15, 2012 @orefalo Merge pull request #4 from Delapouite/master
support mootools 1.4
Failed to load latest commit information.
Demos test with 1.4, everything fine Feb 15, 2012
Source mooTools 1.3 support by vincequeiroz Jun 21, 2011
Logo.png first commit Apr 17, 2010
README.md missed one https link Jan 27, 2011
package.yml first commit Apr 17, 2010
screen1.png first commit Apr 17, 2010
screen2.png first commit Apr 17, 2010

README.md

mooMasonry

mooMasonry is a layout plugin for Mootools. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, mooMasonry 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

Comparison Example

CSS Floats Screenshot

mooMasonry Screenshot

How to use

HTML code:

<div id="primary">
    <div class="box col2">...</div>
    <div class="box col1">...</div>
    <div class="box col1">...</div>
    <div class="box col3">...</div>
    <div>
        <div class="box col1">...</div>
        <div class="box col2">...</div>
        <div class="box col3">...</div>
    </div>
</div>

JS sample:

document.id('primary').masonry({
    columnWidth: 100, 
    itemSelector: '.box' 
});

Docs

Options:

document.id('wrapper').masonry({

    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.
    // Required for Infinite Scroll with window resizing.

    resizeable: true,
    // Binds a mooMasonry call to window resizes.
    // default: true

    appendedContent: '.new_content',
    // Additional container element for appended content.
    // Useful for Infinite Scroll integration.

});

Events:

masoned(container): 
    Fires when masonry of the container is complete. contrainer is the wrapper who just got masoned.

Methods:

Element.masonry(options): 
    Masons the element (which should be a wrapper) with the given options
Something went wrong with that request. Please try again.