Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Element layout engine for Mootools
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 missed one https link
package.yml first commit
screen1.png first commit
screen2.png first commit


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.


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 class="box col1">...</div>
        <div class="box col2">...</div>
        <div class="box col3">...</div>

JS sample:'primary').masonry({
    columnWidth: 100, 
    itemSelector: '.box' 



    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.



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


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