Pinterest-like Fluid Layout with Infinite Scroll - jQuery Waterfall

File Size: 1.41 MB
Views Total: 7482
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Pinterest-like Fluid Layout with Infinite Scroll - jQuery Waterfall

A jQuery approach to creating a inspired, responsive, dynamic, fluid grid layout with support for infinite scrolling.

How to use it:

1. Add your images to the grid layout.

<div id="main">
  <div class="box">
    <div class="pic"> <img src="images/0.jpg"> </div>
  <div class="box">
    <div class="pic"> <img src="images/1.jpg"> </div>
  <div class="box">
    <div class="pic"> <img src="images/2.jpg"> </div>


2. Style the grids in the CSS.

#main { position: relative; }

.box {
  padding: 15px 0 0 15px;
  float: left;

.pic {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;

.pic img {
  width: 165px;
  height: auto;

3. Include the necessary jQuery JavaScript library on the webpage.

<script src="//"></script>

4. The core function.

function waterFall() {
  var $boxs=$('#main>div');
  var w=$boxs.eq(0).outerWidth();
  var cols=Math.floor($(window).width()/w);
  $("#main").width(w*cols).css('margin','0 auto');
  var hArr=[];
    var h=$boxs.eq(index).outerHeight();
    }else {
      var minHeightIndex=$.inArray(minH,hArr);

5. The infinite scroll function.

function checkScrollSlide() {
  var $lastBox=$('#main>div').last();
  var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
  var scrollTop=$(window).scrollTop();
  var documentH=$(window).height();
  return (lastBoxDis<scrollTop+documentH)?true:false;


6. Active the grid layout with infinite scroll support.

  var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]};
        var oBox=$('<div>').addClass('box').appendTo($('#main'));
        var oPic=$('<div>').addClass('pic').appendTo(oBox);

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