Dynaimc Pinterest-Style Grid Layout with Endless Scrolling - jq-waterfall

Just another Pinterest inspired responsive, fluid, dynamic grid layout plugin for arranging images in straight rows, with support of infinite scrolling via Ajax callbacks.

Basic Usage:

1. Include jQuery library and the jQuery jq-waterfall plugin at the end of the web page.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.waterfall.js"></script>

2. Insert your images into a DIV element.

<div id="demo">
  <div class="box"><img src="img/01.jpg" alt=""></div>
  <div class="box"><img src="img/02.jpg" alt=""></div>
  <div class="box"><img src="img/03.jpg" alt=""></div>
  ...
</div>

3. The Javascript to generate a Pinterest style grid layout. Use ajaxCallback to active the infinite scrolling function that allows to dynamically load and display more images as you scroll down the web page.

$("#demo").waterfall({
  itemClass: ".box",
  minColCount: 2,
  spacingHeight: 10,
  resizeable: true,
  ajaxCallback: function(success, end) {
    var data = {"data": [
      { "src": "03.jpg" }, { "src": "04.jpg" }, { "src": "02.jpg" }, { "src": "05.jpg" }, { "src": "01.jpg" }, { "src": "06.jpg" }
    ]};
    var str = "";
    var templ = '<div class="box" style="opacity:0;filter:alpha(opacity=0);"><div class="pic"><img src="img/{{src}}" /></div></div>'

    for(var i = 0; i < data.data.length; i++) {
      str += templ.replace("{{src}}", data.data[i].src);
    }
    $(str).appendTo($("#div1"));
    success();
    end();
  }
});

4. Default options & settings.

itemClass: "waterfall-item", 
// the brick element class

spacingWidth: 10, 
// the brick element horizontal spacing

spacingHeight: 10, 
// the brick element vertical spacing

minColCount: 2, 
// min columns

resizeable: false, 
// trigger positionAll() when browser window is resized

itemAlign: "center", 
// the alignment of the brick element ( e.q. [center|left] )

isFadeIn: true, 
// fadeIn effect on loading

ajaxCallback: null 
// callback when ajax loaded, two parameters ( success, end )

5. Add your own CSS to style the grid layout.

#demo {
  margin: auto;
  position: relative;
}

.box {
  float: left;
  padding: 10px;
  border: 1px solid #ccc;
  background: #f7f7f7;
  box-shadow: 0 0 8px #ccc;
}

.box:hover { box-shadow: 0 0 10px #999; }

.box img { width: 200px; }

---

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