沒有實現(xiàn)啊，好像是設(shè)置的css沒用？
<!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>
2016-11-26
你直接把css樣式引用過來，不要再寫一遍