<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流完成JS</title>
</head>
<style type="text/css">
*{margin:0; padding:0; margin:0 auto;}
#main{ position:relative;}
.box{ padding:15px 0 0 10px; float:left; display:inline; }
.pic { padding:10px; border:1px solid #ccc; border-radius:5px; box-shadow:0 0 2px #ccc; }
.pic img{ width:165px; height:auto;}
</style>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2413634062,3211494602&fm=96&s=E53876DA8E21791562B84C5A030040D7" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img02.taobaocdn.com/bao/uploaded/i2/TB1VhbGGXXXXXaxXpXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://static.17shihui.cn/17shihui/w1.1.50/image/weixin.png?static_version=2" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://ubmcmm.baidustatic.com/media/v1/0f000DH992eKAi22Lq-JVs.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=4282994204,2464365452&fm=96&s=29828C57C21E21CE1D3408290300E053" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://gd3.alicdn.com/bao/uploaded/i3/TB1QENsGpXXXXXDXXXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img3.shijue.cvidea.cn/tf/130530/2283083/52ae71293dfae9b500000005.JPEG" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2413634062,3211494602&fm=96&s=E53876DA8E21791562B84C5A030040D7" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img02.taobaocdn.com/bao/uploaded/i2/TB1VhbGGXXXXXaxXpXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://static.17shihui.cn/17shihui/w1.1.50/image/weixin.png?static_version=2" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://ubmcmm.baidustatic.com/media/v1/0f000DH992eKAi22Lq-JVs.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=4282994204,2464365452&fm=96&s=29828C57C21E21CE1D3408290300E053" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://gd3.alicdn.com/bao/uploaded/i3/TB1QENsGpXXXXXDXXXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img3.shijue.cvidea.cn/tf/130530/2283083/52ae71293dfae9b500000005.JPEG" />
</div>
</div>
<div style="clear:both;"> </div>
</div>
</body>
</html>
<script type="text/javascript">
/*
1、页面加载时 执行 waterfall 方法；
2、写waterfall 方法，里面有两个参数 父Id 子CLSS名。
3、waterfall 里面的步骤：
获取里面的要传的ID ，获取这个ID下面的 所以要CLASS元素，此时要写 getByClass 方法
计算可以区， 显示多少列，： A ;一个CLASS 的宽度， B 可以区别的宽度， 父ID的总宽度： A*B
4' 下面是计算第一列中高度最小的那个元素，然后把要添加的那个元素添加到最小元素下面。 用FOR ， index 获取当前元素的index值方法
此时，页面显示排版正常了， 下面来是， 页面载时， 自动加载进来数据。
5、window.onscroll 绑定方法，
6、 checkScrollsilde 方法，用来计算当前最后一个元素的，高度，是否小于 滚动条的高度， 如果是， 则加载新数据。
*/
window.onload=function(){
waterfall("main","box");
//页面加载时的数据，现在是模拟，应该从后台获取AJAX
var dataInt={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]};
window.onscroll=function(){
//判断最后一个元素到底部露出2分之1时，然后把新数据加载到页面中
if(checkScrollsilde){
//遍历要加载的数据，添加到页面中
for(var i=0;i<dataInt.data.length;i++){
var oParent=document.getElementById("main");
var oBox=document.createElement("div");
oBox.className="box";
oParent.appendChild(oBox);
var oPic=document.createElement("div");
oPic.className="pic";
oBox.appendChild(oPic);
var oImg=document.createElement('img');
oImg.src="img/"+dataInt.data[i].src;
oPic.appendChild(oImg);
}
waterfall("main","box"); //添加一列时， 再些这次一列执行此函数
//
}
}
}
// 计算滚动条加载下一页
function checkScrollsilde(){
var oParent=document.getElementById('main');
var oBoxs=getByclass(oParent,box);
//最后一个元素的当前的TOP值 和本的二分之一的
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor((oBoxs.length-1).offsetHeight/2);
//滚动条的高度
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
//可视区的高度
var height=document.body.clientHeight||document.documentElement.clientHeight;
//两个元素做比较三元运算符
return (lastBoxH<scrollTop+height)? true :false;
}
/*
parent：父元素ID;
box： 要获父元素下的所以元素的CLASS 类名
*/
function waterfall(parent,box){
//获取父元素 id="main" 下的所有box
var oParent=document.getElementById(parent);
var oBoxs=getByClass(oParent,box) ; //用getByClass 方法，获取 父元素下的所有要得到的子元素。是一个数组
alert(oBoxs.length)
var oBoxW=oBoxs[0].offsetWidth; //一个元素的宽度
var cols=Math.floor(document.documentElement.clientWidth/oBoxW);//可视区中显示的列数
oParent.style.cssText='width:'+cols*oBoxW+'px; margin:0 auto;';//父元素添加样式，宽
//下面是计算第一列中高度最小的那个元素，然后把要添加的那个元素添加到最小元素的下面，
var hArr=[];
for(var i=0;i<oBoxs.length;i++){ //遍历所有元素
if(i<cols){ //如果是第一列元素，则把此元素的高度添加到数组中，
hArr.push(oBoxs[i].offsetHeight);
}else{ // 不是第一列元素，则给此元素加上 相对定位，并加上，TOP,left 值 ，
var minH=Math.min.apply(null,hArr);
//alert(minH);
var index=getMinhIndex(hArr,minH);
//alert(oBoxW*index);
oBoxs[i].style.position="absolute";
oBoxs[i].style.top=minH+'px';
oBoxs[i].style.left=oBoxW*index+'px';
}
hArr[index]+=oBoxs[i].offsetHeight; //添加一个元素的高度后，则把高度，再次放到数组中，重新计算。
}
// alert(hArr)
}
// 获取当前元素的索引值 arr：数组， val： 数组值名
function getMinhIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
// 通过CLASS 获取元素 Parent：父元素的ID, className： class类名
function getByClass(Parent ,className){
var boxArr=[]; //用来存获取所以CLASS的元素。
var oElements=Parent.getElementsByTagName("*");
for(var i=0; i<oElements.length;i++){
if(oElements[i].className==className){
boxArr.push(oElements[i])
}
}
return boxArr; //返回到boxArr数组中
}
</script>
