Simple Masonry Layout Plugin For jQuery - indyMasonry

File Size: 771 KB
Views Total: 7892
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

Basic usage:

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

<script src="//"></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 class="indy-masonry">
    <img src="img/2.jpg" alt=""> 
  <figure class="indy-masonry">
    <img src="img/3.jpg" alt=""> 
  <figure class="indy-masonry">
    <img src="img/4.jpg" alt=""> 

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

<button id="add">
  Load more

4. Call the plugin to active teh masonry layout.

$(window).load(function() {

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

$('#add').on('click', function() {

6. Full plugin options.


  // 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.