网站列表页的下拉底部实现加载更多的实例

        上一篇讲到,加载更多时要写的准备代码单没有实现具体的实例,现在我们将讲如何如何应用到实例去中,下面是我写的一篇具体过程实现的完整代码,可以将其复制在本地的编辑器上直接运行

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>网站列表页的下拉底部实现加载更多的实例</title>

</head>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>


<script> 

 var i=1;//初始页数

 $(window).scroll(function () {

  

        //第一步,通过jquery获取windows对象,创建一个滚动事件

        var scrollTop = $(this).scrollTop();

        //第二步,$(this)指的就是当前window对象,

       // 获取window对象滚动条在Y轴上的滚动距离

        var scrollHeight = $(document).height();

        //第三步,获取文档对象的高度

        var windowHeight = $(this).height();

        //第四步,获取window对象的高度

        if (scrollTop + windowHeight == scrollHeight) {

             i++;//每次滚动到底部页数+1

  // alert(i);

      $("#lists").append("<li>"+i+"</li>");

           //这是在静态页面下实现的过程

  //如果想访问服务器的资源必须用ajax

  /*

  $.get("http://www.域名.com/index.php?page="+i,function (data,success){

当然,我们现在没有指定一个具体的服务器地址,但是操作原理一样,就是把服务器返回的数据追加到元素底部而已   

  $("#lists").append(data);

  

  

  })

 */

}

    });




</script>

<body style="height:1000px;">


<ul id="lists">

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

<li>1111111111111111111111111</li>

</ul>

</body>

</html>


关键词:
返回列表

相关文章

相关案例