jq触底加载下一页

css

<style>
		html,body,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;}
		body,html{line-height:1;font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;font-size:16px;color:#333;}
		ol,ul{list-style:none;}
		a{text-decoration:none;}
		body{background:#f2f2f2;}
		.prolist li{height:50px;line-height:50px;border-bottom:1px solid #f8f8f8;background:#fff;padding:0 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
		.prolist li a{color:#333;font-size:16px;}
		
		/**加载效果旋转**/
		@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg);}50% {-webkit-transform: rotate(180deg);}100% {-webkit-transform: rotate(360deg);}}
		@keyframes rotate {0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(360deg);}}
		
		.loadmore {display:block;line-height: 50px;text-align:center;color:#ccc;font-size:14px;}
		.loadmore span{height:20px;width: 20px;border-radius: 100%;display:inline-block;margin:10px;border:2px solid #f60;border-bottom-color: transparent;vertical-align: middle;-webkit-animation: rotate 0.75s 0 linear infinite;animation: rotate 0.75s 0 linear infinite;}
		.loadover{position:relative;margin:0 12px;padding:24px 0;height:20px;line-height:20px;color:#909090;text-align: center;}
		.loadover span{position:relative;display:inline-block;padding:0 6px;height:20px;background:#F2F2F2;z-index:2}
		.loadover:after {content:'';position: absolute;left: 0;top: 50%;width: 100%;height: 1px;background: #DCDCDC;z-index: 1;}
	</style>

 

html

<!-- 产品列表 开始-->
<ul class="prolist">
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
	<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
</ul>
<!-- 产品列表 结束 -->

<script type="text/javascript" src="http://www.86y.org/js/jquery.min.js"></script>

js

//触底加载
    var page=1//当前页
        pages = 10 //总页数
    var finished=0;
    var sover=0;

    //如果屏幕未到整屏自动加载下一页补满
    var setdefult=setInterval(function (){
        if(sover==1)
            clearInterval(setdefult);	
        else if($(".prolist").height()<$(window).height())
            loadmore($(window));
        else
            clearInterval(setdefult);
    },500);

    //加载完
    function loadover(){
        if(sover==1){	
            var overtext="Duang～到底了";
            $(".loadmore").remove();
            if($(".loadover").length>0)
            {
                $(".loadover span").eq(0).html(overtext);
            }
            else
            {
                var txt='<div class="loadover"><span>'+overtext+'</span></div>';
                $("body").append(txt);
            }
        }
    }

    //加载更多
    var vid=0;
    function loadmore(obj){
        if(finished==0 && sover==0){
            var scrollTop = $(obj).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(obj).height();
            console.log(scrollTop)
            console.log(scrollHeight)
            console.log(windowHeight)
            
            if($(".loadmore").length==0)
            {
                var txt='<div class="loadmore"><span class="loading"></span>加载中..</div>';
                $("body").append(txt);
            }
            if (scrollTop + windowHeight -scrollHeight<=50 ) {
                //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
                
                //防止未加载完再次执行
                finished=1;

                $.ajax({
                    type: 'GET',
                    url: 'json/more.json?t=25&page='+page,
                    dataType: 'json',
                    success: function(data){
                        var result = '';
                        for(var i = 0; i < data.lists.length; i++){
                            result+='<li>'
                                        +'<a href="'+data.lists[i].link+'">'+data.lists[i].title+parseInt(page+1)+"-"+i+'</a>'
                                    +'</li>';
                        }
                        
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $(".loadmore").remove();
                            $('.prolist').append(result);
                            page+=1;
                            finished=0;
                            //最后一页
                            if(page==10)
                            {
                                sover=1;
                                loadover();
                            }
                        },1000);
                    },
                    error: function(xhr, type){
                        // alert('Ajax error!');
                        var result = '';
			            for(var i = 0; i < 6; i++){
				vid++;
				result+='<li>'
							+'<a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！'+parseInt(vid)+'</a>'
						+'</li>';
			}
                        setTimeout(function(){
                            $(".loadmore").remove();
                            $('.prolist').append(result);
                            page+=1;
                            finished=0;
                            //最后一页
                            if(page==5)
                            {
                                sover=1;
                                loadover();
                            }
                        },1000);
                    }
                });
            }
        }
    }
    //页面滚动执行事件
    $(window).scroll(function(){
        //判断是否滑动到页面底部
        if($(window).scrollTop() === $(document).height() - $(window).height()){
            // TODO 滑动到底部时可请求下一页的数据并加载，加载可使用append方法
            if(page != pages){
                console.log("当前页到底啦，加载下一页")
                loadmore($(this));
            }
        }
    });