<style type="text/css">body,html{margin: 0;padding:0;}#container{position: relative;margin: 0 auto;text-align: center;}#container div{padding: 10px;position: absolute;}#container div img{padding: 10px;width: 200px;border: 1px solid #ccc;box-shadow: 0 0 5px #ccc;}</style>

    <div id="container"><div><img src="data:images/1.jpg"></div><div><img src="data:images/2.jpg"></div><div><img src="data:images/3.jpg"></div><div><img src="data:images/4.jpg"></div><div><img src="data:images/5.jpg"></div><div><img src="data:images/1.jpg"></div><div><img src="data:images/2.jpg"></div><div><img src="data:images/3.jpg"></div><div><img src="data:images/4.jpg"></div><div><img src="data:images/5.jpg"></div><div><img src="data:images/1.jpg"></div><div><img src="data:images/2.jpg"></div><div><img src="data:images/3.jpg"></div><div><img src="data:images/4.jpg"></div><div><img src="data:images/5.jpg"></div><div><img src="data:images/1.jpg"></div><div><img src="data:images/2.jpg"></div></div>

    function waterFall(){var childs=$('#container div');var CWidth=$(childs[0]).outerWidth();var cols=Math.floor($(window).width()/CWidth);$('#container').width(CWidth*cols);var hArr=[];childs.each(function(index,item){if(index<cols){hArr.push($(item).outerHeight());$(item).css({left:index*CWidth+'px',top:0+'px'});}else{var minH=Math.min.apply(null,hArr);var mIndex=$.inArray(minH,hArr);$(item).css({left:mIndex*CWidth+'px',top:minH+'px'});hArr[mIndex]+=$(item).outerHeight();}});}

     function checkScrollBottom(){var wHeight=$(window).height()+$(window).scrollTop();var lastItem=$("#container>div").last();var lastP=lastItem.offset().top+($(lastItem).outerHeight()/2);console.log($("#container>div").last());return wHeight>lastP?true:false}

function addData(){console.log('addData');for(var i=1; i<6; i++){$('#container').append('<div><img src="data:images/'+i+'.jpg"/></div>');}waterFall();}

    window.οnlοad=function(){waterFall();}window.onscroll=function(){console.log(checkScrollBottom());if(checkScrollBottom()){addData();}else{waterFall();}}

function waterFall(){var parent=document.getElementById('container');var childs=parent.getElementsByTagName('div');var CWidth=childs[0].offsetWidth;var cols=Math.floor(document.body.clientWidth/CWidth);parent.style.width=CWidth*cols+"px";var hArr=[];for(var i=0; i<childs.length; i++){if(i<cols){hArr.push(childs[i].offsetWidth);childs[i].style.left=i*CWidth+'px';childs[i].style.top='0px';}else{var minH=Math.min.apply(null,hArr);var mIndex=getIndex(minH,hArr);childs[i].style.left=mIndex*CWidth+'px';childs[i].style.top=minH+'px';hArr[mIndex]+=childs[i].offsetHeight;}}        }function getIndex(item,arr){for(var i=0;i<arr.length; i++){if(arr[i]==item){return i;}}}function checkScrollBottom(){var wH=document.documentElement.clientHeight||document.body.clientHeight;var sH=document.documentElement.scrollTop||document.body.scrollTop;var wHeight=wH+sH;var Items=document.getElementById('container').getElementsByTagName('div');var lastItem=Items[Items.length-1];var lastP=lastItem.offsetTop+lastItem.offsetHeight/2;return wHeight>lastP?true:false}function addData(){var parent=document.getElementById('container');for(var i=1; i<6; i++){var divEle=document.createElement('div');parent.appendChild(divEle);var  imgEle=document.createElement('img');imgEle.src="data:images/"+i+".jpg";divEle.appendChild(imgEle);}waterFall();}window.onload=function(){waterFall();}window.onscroll=function(){console.log(checkScrollBottom());if(checkScrollBottom()){addData();}else{waterFall();}}