<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;
}
</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 o=document.getElementById(parent);
var ubox=getbox(o,box);
var boxw=ubox[0].offsetWidth;
var lieshu=Math.floor(document.documentElement.clientWidth/boxw);
//main宽度
}
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>
你少一句这个：oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto";这是设置夫元素的宽度和居中