JS实现瀑布流效果

1、页面布局情况
准备好11张宽度值相同高度不同的图片来实现瀑布流效果。

*{padding:0;margin:0;}
.main{margin:15px auto;}
.main .box{float:left;position:relative;}
.main .box .pic{border:1px solid #000;padding:15px;box-shadow:0px 2px 0px 2px #ccc;border-radius:5%;}
.main .box .pic img{width:200px;}

2、页面内容情况

<div class="main">
	<div class="box">
		<div class="pic">
			<img src="images/0.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/1.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/2.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/3.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/4.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/5.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/6.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/7.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/8.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/9.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/10.jpg"/>
		</div>
	</div>
</div>

3、代码实现功能

//实现两次加载图片，第一次时打开页面加载图片，第二次拖动滚动条加载图片
window.onload=function(){
	waterfall(main,box);
		if(scrollTop()){
		window.onscroll=function(){
		var dataImg={
			datas:[
				{src:0.jpg}
				{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}
			]
		}
			var main=document.getElementByClassName("main");
			var oBox=document.createElement("div");
			var opic=document.createElement("div");
			var oimg=document.createElement("img");
			main.appendChild(oBox);
			oBox.appendChild(opic);
			opic.appendChild(oimg);
			for(var i=0;i<dataImg.datas.src.length;i++){
				oimg.src="images/"+dataImg.datas.src[i];
			}
			
			waterfall(main,box);
		}
	}
}
function scrollTop(){
	var height=document.documentElement.clientHeight||docuemnt.body.clientHeight;
	var top=document.documentElement.scrollTop||document.body.scrollTop;
 	if(obox[length-1].offsetHeight/2+obox[length-1].offsetTop<height+top){//加载到一半以下时就加载第一张图片，依次类推
 		return true;
 	}else{
 		return false;
 	}
}
function waterfall(parent,box){
	var oparent=document.getElementByClassName("parent");//获取父元素main
	var obox=getBox(box);//获取子元素box
	//alert(obox.length);//如果为数值11，说明完全匹配成功
	var client_width=document.documentElement.clientWidth||document.body.clientWidth;//设置可视区域的宽度
	var pic_width=obox[0].offsetWidth;//设置一张图片的宽度
	var num=parseInt(client_width/pic_width);//获取有多少张图片，取整数
	oparent.style.width=num*pic_width+"px";//乘以一张图片的宽度，放中间值（居中放置）
	//取下一张放置在高度最矮的下面，分别获得最矮的高度值和left值，再去取下一张放置在第二矮的下面，依次放置。
	var hrr=[];
	for(var i=0;i<obox.length;i++){
		if(i<num){
			hrr.push(obox[i].offsetHeight);//取一行几个数的高度值
			
		}else{
			var min=Math.min.apply(null,hrr);//取最低的那张图片
			var xiabiao=getxiabiao(hrr,min);//取最低的下标
			obox[i].style.position="absolute";//加定位
			obox[i].style.left=xiabiao*pic_width+"px";//放置
			obox[i].style.top=min+"px";//放置
			hrr[xiabiao]=hrr[xiabiao]+obox[i].offsetHeight;//连接起来加载在一起
		}
	}
}
function getxiabiao(hrr,min){
	for(var i=0;i<hrr.length;i++){
		if(hrr[i]==min){
			return i;
		}
	}
}
function getBox(box){//所有图片放置在arr数组里面
	var doms=document.getElementsByTagName("*");
	var reg=new RegExp("\\b"+box+"\\b");//保守起见，完全取box的边界
	var arr=[];
	for(var i=0;i<doms.length;i++){
		if(reg.test(doms[i].className)){
	 		arr.push(doms[i]);
		}
	}
	return arr;
}