Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Element layout engine for Mootools

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 Demos
Octocat-spinner-32 Source
Octocat-spinner-32 Logo.png
Octocat-spinner-32 README.md
Octocat-spinner-32 package.yml
Octocat-spinner-32 screen1.png
Octocat-spinner-32 screen2.png
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.