search

zonear / isotope-perfectmasonry

PerfectMasonry extension for Isotope
137 stars 49 forks source link

readme

PerfectMasonry extension for Isotope

Extension for creating perfect masonry layouts with Isotope 1.x. Now even with pixel perfect liquid layouts!

Prerequisites

Usage

  1. Include perfectMasonry just after jQuery and Isotope.

    <script src="https://github.com/zonear/isotope-perfectmasonry/raw/master/js/jquery.isotope.perfectmasonry.js"></script>

  2. Define Isotope's layout mode to perfectMasonry

    $('#tiles').isotope({
layoutMode: "perfectMasonry"
});

  3. You're all set

Options

....
layoutMode: "perfectMasonry",
perfectMasonry: {
    layout: "vertical",      // Set layout as vertical/horizontal (default: vertical)
    columnWidth: 200,        // Set/prefer specific column width (liquid layout tries to prefer said width)
    rowHeight: 200,          // Set/prefer specific row height (liquid layout tries to prefer said height)

    liquid: true,            // Set layout as liquid (default: false)
    cols: 3,                 // Force to have x columns (default: null)
    rows: 3,                 // Force to have y rows (default: null)
    minCols: 3,              // Set min col count (default: 1)
    minRows: 3,              // Set min row count (default: 1)
    maxCols: 5,              // Set max col count (default: 9999)
    maxRows: 4               // Set max row count (default: 9999)
}

Halp!

There are huge gaps between my tiles

The way Isotope works is that if you don't provide a desired column width/row height for it, it just grabs the first tile and assumes dimensions from that element. So, if you end up with severe case of them gaps, the first element is probably bigger than the rest. In such cases providing the desired options should get rid of the symptoms.

Like so:

$('#tiles').isotope({
    layoutMode: "perfectMasonry",
    perfectMasonry: {
        columnWidth: 200,
        rowHeight: 200
    }
});

Licensing

Use in commercial and personal applications is free.

Note: Isotope has it's own licesing. Read more at: http://isotope.metafizzy.co/

Changelog

View the commit history for a complete robust list of changes to the script.