jq滾動到底部自動加載數據實例 · PHP筆記

[jq滾動到底部自動加載數據實例-幸凡學習網 (86y.org)](http://www.86y.org/art_detail.aspx?id=752) DEMO地址：[http://www.86y.org/demo/jqscroll/](http://www.86y.org/demo/jqscroll/)(建議使用手機打開效果更佳) ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/> <title>jq滾動到底部自動加載|幸凡學習網</title> <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);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}} @keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);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 1.1s infinite linear;animation: rotate 1.1s infinite linear;} .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;display:block;} </style> </head> <body>  <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> <script> var page=1; 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(); if($(".loadmore").length==0) { var txt='<div class="loadmore"><span class="loading"></span>加載中..</div>' $("body").append(txt); } //理論上Math.round(scrollHeight-scrollTop)=windowHeight,但實際上有誤差 //if( (windowHeight+1) <= Math.round(scrollHeight-scrollTop) <= (windowHeight+1) ){} if (scrollTop + windowHeight -scrollHeight<=50 ) { //此處是滾動條到底部時候觸發的事件，在這里寫要加載的數據，或者是拉動滾動條的操作 //防止未加載完再次執行 finished=1; 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==10) { sover=1; loadover(); } },1000); /*$.ajax({ type: 'GET', url: 'json/more.json?t=25&page='+page, dataType: 'json', success: function(data){ if(data=="") { sover = 1; loadover(); if (page == 1) { $("#no_msg").removeClass("hidden"); $(".loadover").remove(); } } else { 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!'); } });*/ } } } //頁面滾動執行事件 $(window).scroll(function (){ loadmore($(this)); }); </script> </body> </html> ```