Lightweight Responsive Pinterest Layout with jQuery - Waterfall

Just another jQuery plugin which makes it simple to create a dynamic, fluid, fully responsive waterfall grid layout with support for infinite scroll as you reach the bottom of the webpage, as you seen on Pinterest.com.

Related Plugins:

• Pinterest Like Glowing Input Fields with CSS3
• Pinterest-Like Dynamic & Responsive Grid Layout Plugin - BlocksIt
• Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark
• Pinterest-Like Web Layout Plugin
• Yet Another Pinterest Like Layout Plugin For jQuery - waterfall
• Pinterest Style Dynamic Layout jQuery Plugin - Masonry
• Simple Pinterest Like Grid Layout Plugin - Pinbox
• Super Tiny Pinterest Dynamic Grid Layout Plugin with jQuery - Pubu
• Tiny Pinterest Like Image Grid Layout Plugin - Mosaic Flow

How to use it:

1. Load the jQuery waterfall plugin at the bottom of the document, after jQuery library.

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

2. Add content boxes/cards into the grid layout as follow.

<div id="box">
  <div>Card1</div>
  <div>Card2</div>
  <div>Card3</div>
  <div>Card4</div>
  <div>Card5</div>
  ...
</div>

3. Just call the plugin on the parent container and the plugin will take care of the rest.

$('#box').waterfall();

4. Plugin options available.

// top offset
top : false, 

// the container witdh
w : false, 

// the amount of columns
col : false, 

// the space bewteen boxes
gap : 10,

// breakpoints in px
// 0-400: 1 column
// 400-600: 2 columns
// 600-800: 3 columns
// 800-1000: 4 columns
gridWidth : [0,400,600,800,1200],

// the interval to check the screen
refresh: 500,
timer : false,

// execute a function as the page is scrolled to the bottom
scrollbottom : false

5. Methods.

// Initialize the plugin
$('#box').waterfall();

// Disable the plugin
$('#box').waterfall('stop'); 

6. Auto load more data as the page reaches the bottom.

var setting = {
    scrollbottom : {
      endtxt : 'No More Data !!',
      callback: funciton(container){
        // if scroll to bottom, load more data...
        $.ajax({}).done(function(data){
          if(data)    
            // resort elements
            container.waterfall('sort');
          else
            // done, show message
            container.waterfall('end');
        });
      }
    }
};

$('#box').waterfall(setting);

Change log:

2015-09-23

• improvement and bugfix

---

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