johansatge / Elastic Columns

A jQuery plugin designed to be used as an alternative to the well-known Isotope library - View demo.

• Why
• Installation
• Basic usage
• API
  • Refreshing the layout
  • Modifying settings on the fly
  • Destroying the layout
  • Ignoring items
• Changelog
• License

Why

I wanted to make a simple alternative to Isotope or Masonry - those modules work very well, but can be oversized on some cases.

Elastic Columns is lightweight (less than 3kb) and will suit your needs if you have to build a grid of items using columns with equal widths.

Installation

With Bower:

bower install elastic-columns

Alternatively, checkout the project and install the minified script whenever you want in your project.

Basic usage

This code will set the position of the children nodes in your container.

var $container = $('.container');
$container.elasticColumns(
{
    columns:        3,  // the number of colums
    innerMargin:    10, // the gap between two tiles
    outerMargin:    20  // the gap between the tiles and
                        // the edge of the container
});

This inits the grid once, and then does nothing.

If your container is fluid (i.e. its width can change), you have to set the right number of columns by yourself, like in the example below:

$(window).on('resize', function(evt)
{
    // Here, we want 4 columns if the size of the window is greater than 800px, 3 columns otherwise
    var columns = $container.width() > 800 ? 4 : 3;
    $container.elasticColumns('set', 'columns', columns);
    $container.elasticColumns('refresh');
});

API

Refreshing the layout

You may want to refresh the layout when the user resizes the window, or when you add new items to the grid (by appending nodes to your container).

$('.container').elasticColumns('refresh');

If you append pictures, be sure to wait for them to be loaded before refreshing the layout, or the calculations may be false.

Modifying settings on the fly

You can change the plugin settings at any time.

$('.container').elasticColumns('set', 'columns', 4);
$('.container').elasticColumns('set', 'innerMargin', 5);
$('.container').elasticColumns('set', 'outerMargin', 10);

When you are updating a parameter, don't forget to refresh the grid.

Destroying the layout

You can restore the layout to its initial state.

$('.container').elasticColumns('destroy');

Ignoring items

You may add the elastic-columns-ignore class to some items if you don't want them to be positioned on the grid. This can be useful if you are filtering the grid content and don't want to remove items on the fly.

<div class="item elastic-columns-ignore"></div>

Changelog

License

This project is released under the MIT License.