zoukankan      html  css  js  c++  java
  • 无限分页

    看了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
    收藏
    关注
    评论
  • 相关阅读:
    后台向前台输出 换行“ ”
    Razor视图引擎输出没有编码的 Html 字符串
    C#之delegate
    C#之Action
    What's New in C# 6.0
    Git 放弃修改
    Spring.Net+Nhibernate
    nmap扫描ip段
    nginx多个if条件并且查询
    查看哪些redis命令拖慢了redis
  • 原文地址:https://www.cnblogs.com/yidengbone/p/6511936.html
Copyright © 2011-2022 走看看