Simple Masonry Layout Plugin For jQuery - indyMasonry

indyMasonry is a simple yet customizable jQuery masonry layout plugin to create a flexible cascading grid layout that supports adding new elements dynamically.

See also:

• Pinterest Style Dynamic Layout jQuery Plugin - Masonry

Basic usage:

1. Load the jQuery indyMasonary plugin after loading jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/jquery.indyMasonry.js"></script>  

2. The Html structure for the masonry layout.

<section id="indy-masonry-container" class="indy-masonry-container">
  <figure class="indy-masonry">
    <img src="img/1.jpg" alt=""> 
  </figure>
  <figure class="indy-masonry">
    <img src="img/2.jpg" alt=""> 
  </figure>
  <figure class="indy-masonry">
    <img src="img/3.jpg" alt=""> 
  </figure>
  <figure class="indy-masonry">
    <img src="img/4.jpg" alt=""> 
  </figure>
  ...
</section>

3. Create a button to load more images/content dynamically.

<button id="add">
  Load more
</button>

4. Call the plugin to active teh masonry layout.

$(window).load(function() {
  $('#indy-masonry-container').indyMasonry();
});

5. Enable the 'load more' button to add more elements dynamically.

$('#add').on('click', function() {
  $('#indy-masonry-container').append(html).indyMasonry('_newElement');
});

6. Full plugin options.

$.indyMasonry({

  // CSS class for items
  'clName'    : '.indy-masonry',

  // space bewteen items
  'gap'       : 20,

  // margin-top
  'mTop'      : 10,

  // margin-bottom
  'mBottom'   : 10,

  // the max number of columns
  'column'    : 4,
  
});

---

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