效果预览:
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>