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

💡 Update August 2023: this project is 9 years old 🎉 it still works, but you might also consider more modern alternatives such as CSS Grids, depending on your use case.

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

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.

With Bower:

bower install elastic-columns

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

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');
});

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.

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.

You can restore the layout to its initial state.

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

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>

This project is released under the MIT License.