最近一直在惡補基礎JS H5 CSS3的基礎知識 關於這個瀑布流: 本來打算看著教程來做的。 不過 感覺理解起來有點複雜。 SO， 自己參考教程默寫了一個。。 目前我所接觸過的瀑布流佈局分為2大類 主要區分在於 float佈局 或者position佈局 點擊這裡下載Demo 貼下源碼：（可能有些BU
最近一直在惡補基礎JS H5 CSS3的基礎知識
關於這個瀑布流:
本來打算看著教程來做的。 不過 感覺理解起來有點複雜。
SO， 自己參考教程默寫了一個。。
目前我所接觸過的瀑布流佈局分為2大類
主要區分在於 float佈局 或者position佈局
貼下源碼：（可能有些BUG，沒有具體測試）
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>
7 *{ margin:0; padding:0;}
8 body{ background:#ddd; }
9 ul{ width:1000px; margin:0 auto; position:relative;}
10 ul li{ width:300px; padding:5px;text-align:center; background:#FFF; border:1px solid #CCC; position:absolute; list-style-type:none; top:0;}
11 ul li img{ width:300px; height:auto;}
12
13 </style>
14
15 <script>
16 //@powerd by websir
17 window.onload = function(){
18 var oAdd = document.getElementById("add");
19 var oUl = document.getElementById("ul");
20 var aLi = oUl.getElementsByTagName("li")
21 var aPos = [{top:0,left:"0px"},{top:0,left:"315px"},{top:0,left:"630px"}]
22 var s = 0;
23 for(var i =0;i<aLi.length;i++)
24 {
25 sortLi(aLi[i])
26
27 }
28
29 add.onclick = function(){
30 var newLi = document.createElement("li");
31 var img = new Image();
32 var span = document.createElement("span");
33 span.innerHTML = Math.ceil(Math.random()*8)*11111;
34 img.src = Math.ceil(Math.random()*8)+".jpg";
35 newLi.appendChild(img);
36 newLi.appendChild(span)
37 img.onload = function(){
38 oUl.appendChild(newLi);
39 sortLi(newLi)
40 }
41
42 }
43
44 function sortLi(obj){
45 aPos.sort(function(a,b){return a.top-b.top});
46 obj.style.left = aPos[0].left;
47 obj.style.top = aPos[0].top+"px";
48 aPos[0].top += obj.offsetHeight+5;
49
50 }
51
52
53 }
54
55
56 </script>
57
58
59 </head>
60
61 <body>
62
63 <input id="add" value="添加" type="button" style="position:fixed; height:30px; width:100%; top:0; z-index:9;" />
64
65 <ul id="ul">
66 <li><img src="1.jpg" />22222</li>
67 <li><img src="2.jpg" />22222</li>
68 <li><img src="3.jpg" />22222</li>
69 <li><img src="4.jpg" />22222</li>
70 <li><img src="5.jpg" />22222</li>
71 <li><img src="6.jpg" />22222</li>
72 <li><img src="7.jpg" />22222</li>
73 <li><img src="8.jpg" />22222</li>
74
75
76 </ul>
77 </body>
78 </html>
