<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>waterfall</title>
<style>
*{
margin:0;
padding:0;
}
main{
position:relative;
}
.box{
padding:15px 0 0 15px;
float:left;
}
.pic{
padding:10px;
border:1px solid #ccc;
border-radius:1px;
box-shadow:0 0 5px #ccc;
}
.pic img{
width:170px;
height:auto;
}
</style>
</head>
<body>
<div id="main">
<div class="box">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
</div>
<div class="box">
<div class="pic">
</div>
</div>
</body>
</html>
<script>
window.onload=function(){
waterfall('main','box');
var data = {"message":"pictures","images":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},{"src":"12.jpg"},{"src":"13.jpg"},{"src":"14.jpg"},{"src":"15.jpg"},{"src":"16.jpg"},{"src":"17.jpg"},{"src":"18.jpg"},{"src":"19.jpg"},{"src":"20.jpg"},{"src":"21.jpg"},{"src":"22.jpg"},{"src":"23.jpg"}]};
window.onscroll=function(){
var oParent = document.getElementById('main');
var oBoxs = oParent.getElementsByClassName('box');
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight);
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
var height = document.body.clientHeight||document.documentElement.clientHeight;
if(checkScroll()){
var oParent = document.getElementById('main');
for(var i=0;i<data.images.length;i++){
var div = document.createElement('div');
div.className = 'box';
oParent.appendChild(div);
var pic = document.createElement('div');
pic.className = 'pic';
div.appendChild(pic);
var img = document.createElement('img');
img.src='images/'+data.images[i].src;
pic.appendChild(img);
}
waterfall('main','box');
}
}
}
function waterfall(parent,box){
var oParent=document.getElementById(parent);
var oBoxs=oParent.getElementsByClassName(box);
var boxW=oBoxs[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/boxW);
oParent.style.cssText='width:'+boxWcols+'px;margin:0 auto';
var hArr=new Array();
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH=Math.min.apply(null,hArr);
var index=getMinHIndex(hArr,minH);
hArr[index]+=oBoxs[i].offsetHeight;
oBoxs[i].style.position='absolute';
oBoxs[i].style.left=indexboxW+'px';
oBoxs[i].style.top=minH+'px';
}
}
}
function getMinHIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
function checkScroll() {
var oParent = document.getElementById('main');
var oBoxs = oParent.getElementsByClassName('box');
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight);
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
var height = document.body.clientHeight||document.documentElement.clientHeight;
return (lastBoxH < scrollTop + height + 200)?true:false;
}
</script>
