<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css" media="screen">
*{
padding: 0px;
margin:0px;
}
#main{
position:relative;
}
.box{
padding:15px 0 0 15px;
float:left;
}
.pic{
padding:10px;
border:1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width:165px;
height:auto;
}
.aa{
float:right;
}
</style>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>瀑布流</title>
<script type="text/javascript">
window.onload=function(){
waterfall("main","box");
}
function waterfall(parent,box){
var oparent=document.getElementById(parent);
var ubox=getbox(oparent,box);
var boxw=ubox[0].offsetWidth;
var lieshu=Math.floor(document.documentElement.clientWidth/boxw);
var boxh=new Array();
for(var i=0;i<ubox.length;i++){
if(i<lieshu) boxh.push(ubox[i].offsetHeight);
else{
var minh=Math.min.apply(null,boxh);
var mn= minnum(boxh,minh);
ubox[i].style.position:'absolute';
ubox[i].style.top:minh+"px";
ubox[i].style.left:mn*boxw+"px";
boxh[mn]=boxh[mn]+ubox[i].offsetHeight;
}
}
}
function minnum(arr,val){
for(var i in arr){
if(arr[i]==val)
return i;
}
}
function getbox(parent,clsname){
//取main每个box
var xbox=new Array(),//用来存储class为box的元素
a=parent.getElementsByTagName('*');
for(var i=0;i<a.length;i++){
if(a[i].className==clsname) xbox.push(a[i]);
}
return xbox;
}
</script>
</head>
<body>
<div id="main">
<div>
<div>
<img src="imaegs/1.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/2.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/3.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/4.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/5.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/6.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/7.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/8.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/9.jpeg"alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/10.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/11.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/12.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/13.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/14.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/15.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/16.jpeg" alt="" />
</div>
</div>
<div>
<div>
<img src="imaegs/17.jpeg" alt="" />
</div>
</div>
</div>
</body>
</html>
你直接把css样式引用过来，不要再写一遍