无限分页

看了xingoo大神的博客，把他的示例代码拿了过来，原文链接：http://www.cnblogs.com/xing901022/p/5052780.html
示例代码：
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>无限翻页测试</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 7     <style type="text/css">
 8     #spinner{
 9         position: fixed;
10         top: 20px;
11         left: 40%;
12         display: block;
13         color: red;
14         font-weight: 900;
15         background-color: rgba(80, 80, 90, 0.22);
16         padding-top: 20px;
17         padding-bottom: 20px;
18         padding-left: 100px;
19         padding-right: 100px;
20         border-radius: 15px;
21     }
22     </style>
23 </head>
24 <body>
25     <div id="sample">
26     </div>
27     <div id="spinner">
28         正在加载
29     </div>
30     <script type="text/javascript">
31         var index = 0;
32         function lowEnough(){
33             var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
34             var viewportHeight = window.innerHeight || 
35                 document.documentElement.clientHeight ||
36                 document.body.clientHeight || 0;
37             var scrollHeight = window.pageYOffset ||
38                 document.documentElement.scrollTop ||
39                 document.body.scrollTop || 0;
40             // console.log(pageHeight);
41             // console.log(viewportHeight);
42             // console.log(scrollHeight);
43             return pageHeight - viewportHeight - scrollHeight < 20;
44         }
45 
46         function doSomething(){
47             var htmlStr = "";
48             for(var i=0;i<10;i++){
49                 htmlStr += "这是第"+index+"次加载<br>";
50             }
51             $('#sample').append(htmlStr);
52             index++;
53             pollScroll();//继续循环
54             $('#spinner').hide();
55         }
56 
57         function checkScroll(){
58             if(!lowEnough()) return pollScroll();
59 
60             $('#spinner').show();
61             setTimeout(doSomething,900);
62             
63         }
64         function pollScroll(){
65             setTimeout(checkScroll,1000);
66         }
67         checkScroll();
68     </script>
69 </body>
70 </html>
View Code
顶
Top
关注