jQuery插件实现网页底部自动加载

点评：要实现滚动条滚到底部自动加载后续内容到内容到底部的功能，用jQuery非常方便的，只要知道什么时候滚动到了底部就好办了。
Js代码 $(document).scrollTop() //获取

...实现滚动条滚到底部自动加载后续内容到内容到底部的功能，用jQuery非常方便的，只要知道什么时候滚动到了底部就好办了。
js代码

$(document).scrollTop() //获取垂直滚动条到顶部的距离   $(document).height()//整个网页的高度   $(window).height()//浏览器窗口的高度

文档的高度减去窗口的高度就是滚动条可滚动的范围了。那么

$(window).scrollTop() + $(window).height()  >= $(document).height()

滚动条就到底部了，我们只要在$(window).scroll()中判断和加载内容就可以了：

$(function(){     $(window).scroll(function() {         //当内容滚动到底部时加载新的内容         if ($(this).scrollTop() + $(window).height() + 20 >= $(document).height() && $(this).scrollTop() > 20) {             //当前要加载的页码             LoadPage(currPage);         }     });   });

代码中的20是我设置的偏移量，如果底部有其它内容，要在看到底部内容时就加载，而不是必须滚动到底部，就需要这个偏移量了，$(this).scrollTop() > 20是为了不让页面还没有滚动就触发加载；至于页面要加载的内容当然是AJAX处理了，都在LoadPage()中处理就行了！

JQuery滚动加载更多数据实例
 

<div class="container">         <div class="top">             <span>正在热映</span>             <span class="more">更多></span>         </div>         <div class="item">             <ul class="ul">                 <div class="y_loading_easy" id="J_loadmore">努力加载中...</div>             </ul>         </div>     </div>

js代码
 

JS代码如下： ```  $(function () {  //滚动加载     var stop = true;     var start = 0;     $.ajaxSetup({async:false});     function getData(url){         $.ajax({             type:"get",//跨域访问时只能用get             url:url,//要访问的api地址             dataType:"jsonp",             success:function(data){                 var d = data.subjects;                 var html = &#39;&#39;;                 for(i in d){                     html += '<li>'                     +'<span class="img-span"><img src="'+d[i].images.large+'">'+'</span>'                     +'<p class="name">'+d[i].title+'</p>'                     +'</li>'                     start++;                 }                 stop = true;                 $('.ul').append(html);             },         });     }     getData('https://api.douban.com/v2/movie/in_theaters');     $(window).scroll(function(){         var url = "https://api.douban.com/v2/movie/in_theaters?start="+start+"&count=20";         var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());         if($(document).height() <= totalheight +120){             if(stop == true){                 stop = false;                 $('#j_loadmore').addClass('enabled');                 getData(url);             }         }     }) })