1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="jquery-1.8.2.js" type="text/javascript"></script> 5 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 var range = 50; //距下边界长度/单位px 9 var elemt = 40; //插入元素高度/单位px 10 var maxnum = 30; //设置加载最多次数 11 var num = 1; 12 var totalheight = 0; 13 var main = $("#content"); //主体元素 14 $(window).scroll(function () { 15 var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度) 16 17 //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop()); 18 //console.log("页面的文档高度 ："+$(document).height()); 19 //console.log('浏览器的高度：'+$(window).height()); 20 21 totalheight = parseFloat($(window).height()) + parseFloat(srollPos);//滚动条当前位置距顶部距离+浏览器的高度 22 if (($(document).height() - totalheight) <= range && num != maxnum) {//页面底部与滚动条底部的距离<range 23 main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>"); 24 main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>"); 25 num++; 26 } 27 }); 28 }); 29 </script> 30 </head> 31 <body> 32 <div id="content" style="height:960px"> 33 <div id="follow">this is a scroll test;<br /> 页面下拉自动加载内容</div> 34 <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800'>hello world test DIV</div> 35 36 </div> 37 </body> 38 </html>
来源:http://www.cnblogs.com/Fly-sky/p/4026748.html