Lightweight Responsive Pinterest Layout with jQuery - Waterfall

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

Related Plugins:

How to use it:

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

<script src="//"></script>
<script src="waterfall-light.js"></script>

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

<div id="box">

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


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

// Disable the plugin

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...
            // resort elements
            // done, show message


Change log:


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