From:一条被猫抛弃的他乡流浪狗!

浏览器滚动条快到底部时自动加载数据 

 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

posted @ 2015-11-30 14:29  ICE_Inspire  阅读(535)  评论(0)  编辑  收藏  举报