Yet Another Pinterest Like Layout Plugin For jQuery - waterfall

Yet Another Pinterest Like Layout Plugin For jQuery - waterfall
File Size: 277 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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:

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.