Create A Dynamic Responsive Masonry Layout In jQuery - Elastic Columns

Elastic Columns is a lightweight jQuery plugin for creating flexible responsive Masonry-like layouts inspired by Masonry.js and Isotope.js.

The plugin equalizes the width of grid items and re-arranges them in a fluid grid layout similar to Pinterest.

See Also:

• 10 Best Grid Layout Systems In JavaScript And CSS

How to use it:

1. Download and load the minified version of the Elastic Columns after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/elastic-columns.min.js"></script>

2. Add items to the Masonry layout.

<div class="columns">
  <div class="item">
    Grid Item 1
  </div>
  <div class="item">
    Grid Item 2
  </div>
  <div class="item">
    Grid Item 3
  </div>
  ...
</div>

3. Initialize the plugin on the top container and specify the number of columns as follows.

var $container = $('.columns');
$container.elasticColumns(
{
  columns: 3,
});

4. Enable the plugin to dynamically set the number of columns based on the screen size.

$(window).on('resize', function(evt)
  {
    // 4 columns when the screen size is larger than 1200px 
    var columns = $container.width() > 1200 ? 4 : 3;
    $container.elasticColumns('set', 'columns', columns);
    $container.elasticColumns('refresh');
});

5. Enable the plugin to dynamically set the number of columns based on the screen size.

$(window).on('resize', function(evt)
  {
    // 4 columns when the screen size is larger than 1200px 
    var columns = $container.width() > 1200 ? 4 : 3;
    $container.elasticColumns('set', 'columns', columns);
    $container.elasticColumns('refresh');
});

6. Set the gap between grid items.

var $container = $('.columns');
$container.elasticColumns(
{
  columns: 3,
  innerMargin: 20,
  outerMargin: 20,
});

7. Destroy the instance.

$container.elasticColumns('destroy');

---

This awesome jQuery plugin is developed by johansatge. For more Advanced Usages, please check the demo page or visit the official website.