1 <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>瀑布流式布局</title>
6 <style type="text/css">
7 #wrap{ margin:0; padding:0; width:800px; height:3000px; margin:0 auto; background:#C60; position:relative;}
8 .item{ width:240px; height:auto; border-radius:5px; background:#FFC; position:absolute;}
9 .item1{ height:300px;}
10 .item2{ height:250px;}
11 .item3{ height:350px;}
12 </style>
13 </head>
14 <body>
15 <div id="wrap">
16 <div class="item item1">1</div>
17 <div class="item item2">2</div>
18 <div class="item item3">3</div>
19 <div class="item item2">4</div>
20 <div class="item item3">5</div>
21 <div class="item item1">6</div>
22 <div class="item item3">7</div>
23 <div class="item item1">8</div>
24 <div class="item item2">9</div>
25 <div class="item item3">10</div>
26 <div class="item item2">11</div>
27 <div class="item item3">12</div>
28 <div class="item item1">13</div>
29 <div class="item item3">14</div>
30 <div class="item item1">15</div>
31 <div class="item item2">16</div>
32 </div>
33 <script type="text/javascript">
34 document.getElementByClassName = function(className,tag)
35 {
36 var tag = tag?tag:"*";
37 var allTags = document.getElementsByTagName(tag);
38 var tagNums = allTags.length;
39 var element = [];
40 var i=0;
41 for(n in allTags){
42 current = allTags.item(n);
43 if(current!=null){//如果当前元素的class不等于null
44 if(current.className==className)//找到类名为className的dom元素
45 {
46 element[i++]=current;
47 }
48 }
49 }
50 return element;
51 }
52 //该函数获取obj的CSS属性。
53 function GetCurrentStyle (obj, prop) {
54 if (obj.currentStyle) {
55 return obj.currentStyle[prop];
56 }
57 else if (window.getComputedStyle) {
58 propprop = prop.replace (/([A-Z])/g, "-$1");
59 propprop = prop.toLowerCase ();
60 return document.defaultView.getComputedStyle (obj,null)[prop];
61 }
62 return null;
63 }
64
65 var wrap= document.getElementById("wrap");
66 var items= document.getElementsByClassName("item");
67 var i,l,h1,h2,h3;
68 h1=0;
69 h2=0;
70 h3=0;
71 //i为最大列数，根据容器wrap的宽度和单项的宽度相比得出；
72 i=Math.floor(parseInt(GetCurrentStyle(wrap,"width"))/parseInt(GetCurrentStyle(items[0],"width")));
73 //l表示间距。容器宽度-单项宽度*项数=空白宽度，空白宽度/列数-1=每个空白宽度
74 l=(parseInt(GetCurrentStyle(wrap,"width"))-parseInt(GetCurrentStyle(items[0],"width"))*i)/(i-1);
75 for(var j=0;j<items.length;j++){
76 //var h1,h2,h3;
77 if(j<i){
78 items[j].style.top="0px";
79 items[j].style.left= j%i *(l+parseInt(GetCurrentStyle(items[0],"width")))+"px";
80 if(j%i ==0 ){
81 h1+=parseInt(GetCurrentStyle(items[j],"height"))+10;//J=0，H1=300
82 }
83 else if(j%i==1){
84 h2+=parseInt(GetCurrentStyle(items[j],"height"))+10;//J=1，H2=250
85 }
86 else if(j%i==2){
87 h3+=parseInt(GetCurrentStyle(items[j],"height"))+10;//J=2，H3=350
88 }
89 }
90 else {
91 var minheight=Math.min(Math.min(h1,h2),h3);
92 if( minheight == h1){
93 items[j].style.top = h1+"px";
94 items[j].style.left= "0px";
95 h1+=parseInt(GetCurrentStyle(items[j],"height"))+10;
96 }
97 else if(minheight == h2){
98 items[j].style.top = h2+"px";
99 items[j].style.left=parseInt(GetCurrentStyle(items[0],"width"))+l+"px";
100 h2+=parseInt(GetCurrentStyle(items[j],"height"))+10;
101 }
102 else if(minheight == h3){
103 items[j].style.top = h3+"px";
104 items[j].style.left= (parseInt(GetCurrentStyle(items[0],"width"))+l)*2+"px";
105 h3+=parseInt(GetCurrentStyle(items[j],"height"))+10;
106 }
107 }
108 }
109 </script>
110 </body>
111 </html>
