原生Js自适应浏览器宽度的瀑布流布局

效果预览:
http://jsfiddle.net/dtdxrk/AWLu3/3/embedded/result/
简单制作思路
1.获取浏览器宽度添加ul 每个ul里默认添加5个li
2.图片数据http://cued.xunlei.com/demos/publ/img/P_001.jpg-P_162.jpg
3.当ul高小于页面的高加载数据
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>原生Js自适应浏览器宽度的瀑布流布局</title>
  6     <style type="text/css">
  7     *{ margin:0; padding:0;}
  8     body{ font:13px '微软雅黑', arial, \5b8b\4f53, sans-serif;background: #efefef;line-height: 1.5;overflow-x:hidden;}
  9     #text{background: green;color: #fff;padding-bottom: 10px;}
 10 
 11     #warp{ margin:10px auto 0; overflow:hidden; }
 12     #warp ul{float: left; width: 212px; overflow: hidden;font-size: 0;height: auto;margin: 0 5px;}
 13     #warp ul li{border: 1px solid #ccc;background: #fff;width: 210px;margin-bottom: 10px;line-height: 1;}
 14     #warp ul li img{ display: block;margin: 10px auto;}
 15     #warp ul li p{ text-align: center;font-size: 12px;margin-bottom: 10px;}
 16     </style>
 17    
 18 </head>
 19 <body>
 20 <div id="text">
 21     <h1>简单制作思路</h1>
 22     <p>1.获取浏览器宽度添加ul 每个ul里默认添加5个li</p>
 23     <p>2.图片数据http://cued.xunlei.com/demos/publ/img/P_001.jpg-P_162.jpg</p>
 24     <p>3.当ul高小于页面的高加载数据</p>
 25 </div>
 26 <div id="warp"></div>
 27 <script type="text/javascript">
 28 var Warp = {
 29     rootImage: "http://cued.xunlei.com/demos/publ/img/",    //图片路径
 30     imgLen : 162,
 31     imgIndex : 1,
 32     uls : [],
 33     pageWidth : document.documentElement.scrollWidth || document.body.scrollWidth, //页面宽度
 34     init : function(id,ulWidth){    //id,ul的宽度
 35         this.div = document.getElementById(id);
 36         this.ulWidth = ulWidth;
 37         this.creatUL();
 38         this.onscroll();
 39     },
 40     creatUL :function(){
 41         var i,ul,li,n,
 42             ulLen = Math.floor(this.pageWidth / this.ulWidth);
 43         this.div.style.width = this.pageWidth + "px";
 44         this.div.style.paddingLeft = (this.pageWidth - ulLen*this.ulWidth)/2 - 8 +"px";
 45         for(i=0; i<ulLen; i++){
 46             ul = document.createElement("ul");
 47             for(n=0; n<5; n++){
 48                 li = this.creatLI();
 49                 ul.appendChild(li);
 50             }
 51             this.uls.push(ul);
 52             this.div.appendChild(ul);
 53         }
 54     },
 55     creatLI : function(){
 56         var i = this.imgIndex,
 57             li = document.createElement("li");
 58         if(i<10){
 59             i = "00"+i;
 60         }else if(i<100){
 61             i = "0"+i;
 62         }else if(i==this.imgLen){    //等于上限从1循环
 63             this.imgIndex = 0;
 64         }
 65         li.innerHTML = "<img src='http://cued.xunlei.com/demos/publ/img/P_"+ i +".jpg' /><p>"+i+".jpg</p>";
 66         this.imgIndex ++;
 67         return li;
 68     },
 69     onscroll : function(){
 70         var that = this,
 71             height,pageHeight,getScrollTop,
 72             bodyHeight = document.documentElement.clientHeight || document.body.clientHeight;   //获取页面可视区域宽度
 73         that.addHandler(window,"scroll",function(){
 74             setTimeout(function(){
 75                 for(var i = 0, len=that.uls.length; i<len; i++){
 76                     height = that.getPosition(that.uls[i]).height;
 77                     getScrollTop = document.documentElement.scrollTop || document.body.scrollTop;   // 获取页面卷去的高度
 78                     if(height < (getScrollTop+bodyHeight)){ //获取页面总高度（总高度 = 卷去高度 + 可视区域高度）
 79                         that.uls[i].appendChild(that.creatLI());
 80                     }
 81                 }
 82             },50);
 83         })
 84     },
 85     getPosition : function(obj) { //获取元素在页面里的位置和宽高
 86       var top = 0,
 87           left = 0,
 88           width = obj.offsetWidth,
 89           height = obj.offsetHeight;
 90   
 91       while(obj.offsetParent){
 92           top += obj.offsetTop;
 93           left += obj.offsetLeft;
 94           obj = obj.offsetParent;
 95       }
 96   
 97       return {"top":top,"left":left,"width":width,"height":height};
 98    },
 99    addHandler:function(node, type, handler){
100        node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);
101    },
102 };
103 
104 Warp.init("warp",222);
105 </script>
106 </body>
107 </html>