Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Element layout engine for Mootools
JavaScript
Branch: master
Failed to load latest commit information.
Demos test with 1.4, everything fine
Source mooTools 1.3 support by vincequeiroz
Logo.png first commit
README.md missed one https link
package.yml first commit
screen1.png first commit
screen2.png first commit

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.