<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
*{
padding: 0;
margin: 0;
}
#main{
position: relative;
}
.box{
float: left;
padding: 15px 0 0 15px;
}
.pic{
padding:10px;
border: 1px solid #666;
border-radius: 3px;
box-shadow: 0 0 3px #777;
}
.pic img{
height: auto;
width: 150px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic"><img src="img/1.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/2.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/3.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/4.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/5.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/6.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/7.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/8.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/9.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/10.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/11.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/12.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/13.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/14.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/15.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/16.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/17.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/18.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/19.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/20.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/21.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/22.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/23.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/24.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/25.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/26.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/27.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/28.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/30.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="img/31.jpg" alt=""></div>
</div>
</div>
<script>
window.onload=function(){
waterfall('main','box');
}
function waterfall(id,clsN){
var oid=document.getElementById(id);
var cls=getByClassName(oid,clsN);
var boxW=cls[0].offsetWidth;
var num=Math.floor(document.documentElement.clientWidth/boxW);
oid.style.cssText="width:"+num*boxW+"px ; margin:0 auto;";
var ar=[];
for(var i=0; i<cls.length;i++){
if(i<num){
ar[i]=cls[i].offsetHeight;
}else{
var minH=Math.min.apply(null,ar);
var minIndex=getminHIndex(ar,minH);
cls[i].style.position="absolute";
cls[i].style.top=minH+"px";
cls[i].style.left=cls[minIndex].offsetLeft+"px";
ar[minIndex]+=cls[i].offsetHeight;
}
}
}
function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH){
return i;
}
}
}
function getByClassName(parent,classname){
var arr=new Array();
var oparent=parent.getElementsByTagName('*');
for(var i=0;i<oparent.length;i++){
if(oparent[i].className==classname){
arr.push(oparent[i]);
}
}
return arr;
}
</script>
</body>
</html>
