比较容易理解的---原生js瀑布流

最近一直在恶补基础JS H5 CSS3的基础知识

关于这个瀑布流:

 本来打算看着教程来做的。 不过 感觉理解起来有点复杂。

 

SO， 自己参考教程默写了一个。。

 

目前我所接触过的瀑布流布局分为2大类

 

主要区分在于 float布局 或者position布局

 

点击这里下载Demo

 

贴下源码：（可能有些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>

 

posted @ 2015-04-02 17:08  四两websir  阅读(331)  评论(0)  编辑  收藏  举报