http://jsfiddle.net/dtdxrk/AWLu3/3/embedded/result/
Js瀑布流布局(固定4列 滚动条向下加载数据)
1.添加4个ul并列显示 添加数据结构
2.随机分配15张图片到li里 http://greencat.w211141.fxdns.cn/jsplay/waterfull/images/01.jpg - 15.jpg
3.当滚动条快移动到页面底部时 添加li
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Js瀑布流布局(固定4列 滚动条向下加载数据)</title> 6 <style type="text/css"> 7 *{ margin:0; padding:0;} 8 body{ font:12px '微软雅黑', arial, \5b8b\4f53, sans-serif;background: #efefef;line-height: 1.5} 9 #text{background: green;color: #fff;padding-bottom: 10px;} 10 11 #warp{width:960px; margin:10px auto 0; overflow:hidden;} 12 #warp ul{float: left; width: 240px; overflow: hidden;font-size: 0;} 13 #warp ul li{border: 1px solid #ccc;background: #fff;width: 220px;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>Js瀑布流布局(固定4列 滚动条向下加载数据)</h1> 22 <p>1.添加4个ul并列显示 添加数据结构</p> 23 <p>2.随机分配15张图片到li里 http://vvgr.svfree.net/Waterfull/images/01.jpg - 15.jpg</p> 24 <p>3.当滚动条快移动到页面底部时 添加li</p> 25 </div> 26 <div id="warp"></div> 27 <script type="text/javascript"> 28 (function(){ 29 var warp = document.getElementById("warp"); 30 31 //添加4个ul 增加li 32 for(var i=0; i<4; i++){ 33 var ul = document.createElement("ul"); 34 for(var m=1; m<5; m++){ 35 var li = document.createElement("li"), 36 number = random(); 37 li.innerHTML = "<img src='http://vvgr.svfree.net/Waterfull/images/"+ number +".jpg'><p>"+ number +".jpg</p>" 38 ul.appendChild(li); 39 } 40 warp.appendChild(ul); 41 } 42 43 //15个随机数 44 function random(){ 45 var number = Math.round(Math.random()*15); 46 if(number<10) number = "0"+number; 47 if(number==0) number = "15"; 48 return number; 49 } 50 51 window.onscroll = function(){ 52 var pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight, //获取页面总高度（总高度 = 卷去高度 + 可视区域高度） 53 getScrollTop = document.documentElement.scrollTop || document.body.scrollTop, // 获取页面卷去的高度 54 bodyHeight = document.documentElement.clientHeight || document.body.clientHeight; //获取页面可视区域宽度 55 if(getScrollTop+bodyHeight+300 > pageHeight){ 56 var uls = warp.getElementsByTagName("ul"); 57 for(var i=0; i<uls.length; i++){ 58 var li = document.createElement("li"), 59 number = random(); 60 li.innerHTML = "<img src='http://vvgr.svfree.net/Waterfull/images/"+ number +".jpg'><p>"+ number +".jpg</p>" 61 uls[i].appendChild(li); 62 } 63 } 64 } 65 })(); 66 </script> 67 </body> 68 </html>