Yet Another Pinterest Like Layout Plugin For jQuery - waterfall

waterfall is a powerful and pretty jQuery plugin for creating dynamic and responsive Pinterest like layout which supports infinite ajax scroll.

Features:

• Infinite scrolling page
• Ajax content supported (html or JSON data)
• Animated resize effect
• Fadein effect on loading
• Can be set to display a pagination when scrolling to the bottom
• Fixed width supported
• Custom template to create your own layout
• Custom max/min columns
• Responsive and cross-browser

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
• 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. Include jQuery waterfall CSS on your webpage

<link rel="stylesheet" href="css/waterfall.css">

2. Create a container for your layout

<div id="container"></div>

3. Create the template

<script type="text/x-handlebars-template" id="waterfall-tpl">
{{#result}}
    <div class="item">
        <img src="{{image}}" width="{{width}}" height="{{height}}" />
    </div>
{{/result}}
</script>

4. Include necessary javascript files on the web page

<script src="js/libs/jquery/jquery.js"></script> 
<script src="js/libs/handlebars/handlebars.js"></script> 
<script src="js/waterfall.min.js"></script> 

5. Call the plugin with options

<script>
$('#container').waterfall({
    itemCls: 'item',
    colWidth: 222,  
    gutterWidth: 15,
    gutterHeight: 15,
    checkImagesLoaded: false,
    path: function(page) {
        return 'data/data1.json?page=' + page;
    }
});
</script>

6. More options

itemCls: 'waterfall-item',	
prefix: 'waterfall',	
fitWidth: true,	
colWidth: 240,	
gutterWidth: 10,	
gutterHeight: 10,	
align: 'center',	
minCol: 1,	
maxCol: ,	
maxPage: ,	
bufferPixel: -50,	
containerStyle: {position: 'relative'},	
resizable: true,	
isFadeIn: false,	
isAnimated: false,	
animationOptions: {},	
isAutoPrefill: true,	
checkImagesLoaded: true,

More examples:

• With resize animation
• Fixed layout width
• With fadein effect on loading
• With pagination
• Fixed left or right boxes
• Ajax load html
• Infinite Scroll
• Ajax load json
• Custom columns
• With mustache templates

Change log:

v0.1.73 (2015-12-01)

• Fixed scroll bar existing all the time

v0.1.71 (2014-04-10)

• fix append method

---

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