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

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

关于这个瀑布流:

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

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

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

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

点击这里下载Demo

贴下源码：（可能有些BUG，没有具体测试）

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <style>
 *{ margin:0; padding:0;}
 body{ background:#ddd; }
 ul{ width:1000px; margin:0 auto; position:relative;}
 ul li{ width:300px; padding:5px;text-align:center; background:#FFF; border:1px solid #CCC; position:absolute; list-style-type:none; top:0;}
 ul li img{ width:300px; height:auto;}

 </style>

 <script>
     //@powerd by websir
     window.onload = function(){
         var oAdd = document.getElementById("add");
         var oUl = document.getElementById("ul");
         var aLi = oUl.getElementsByTagName("li")
         var aPos = [{top:0,left:"0px"},{top:0,left:"315px"},{top:0,left:"630px"}]
         var s = 0;
         for(var i =0;i<aLi.length;i++)
         {
                 sortLi(aLi[i])

         }

         add.onclick = function(){
             var newLi = document.createElement("li");
             var img = new Image();
             var span = document.createElement("span");
             span.innerHTML =  Math.ceil(Math.random()*8)*11111;
             img.src = Math.ceil(Math.random()*8)+".jpg";
             newLi.appendChild(img);
             newLi.appendChild(span)
             img.onload = function(){
                 oUl.appendChild(newLi);
                 sortLi(newLi)
             }

         }

         function sortLi(obj){
             aPos.sort(function(a,b){return a.top-b.top});
             obj.style.left = aPos[0].left;
             obj.style.top = aPos[0].top+"px";
             aPos[0].top += obj.offsetHeight+5;

         }

     }

 </script>

 </head>

 <body>

 <input id="add" value="添加" type="button" style="position:fixed; height:30px; width:100%; top:0; z-index:9;" />

 <ul id="ul">
 <li><img src="1.jpg" />22222</li>
 <li><img src="2.jpg" />22222</li>
 <li><img src="3.jpg" />22222</li>
 <li><img src="4.jpg" />22222</li>
 <li><img src="5.jpg" />22222</li>
 <li><img src="6.jpg" />22222</li>
 <li><img src="7.jpg" />22222</li>
 <li><img src="8.jpg" />22222</li>

 </ul>
 </body>
 </html>