jQuery滑動(dòng)到底部加載下一頁(yè)數(shù)據(jù)的實(shí)例代碼
更新時(shí)間:2017年05月22日 11:05:14 作者:vonphp
這篇文章主要介紹了jQuery滑動(dòng)到底部加載下一頁(yè)數(shù)據(jù)的實(shí)例代碼,需要的朋友可以參考下
廢話不多說(shuō)了,直接給大家貼代碼了,具體代碼如下所示:
<script>page_num =page_num+1 ; //頁(yè)碼自動(dòng)增加,保證下次調(diào)用時(shí)為新的一頁(yè)。 $.ajax({ type: "get", url: rent_url, data: '2', dataType: "json", success: function (data) { // 查詢到的數(shù)據(jù)總數(shù) rentDataNum = data.count // 每頁(yè)加載6個(gè) 需要加載的頁(yè)數(shù) rentDataPagge = Math.ceil(rentDataNum/6); $(".loaddiv").hide(); // 返回信息的長(zhǎng)度 大于0 則調(diào)用函數(shù) 把加載的數(shù)據(jù)通過(guò)html的形式 追加到視圖中 if (data.houses.length > 0) { insertDiv(data.houses,rentDataPagge,pagenumber); } }, beforeSend: function () { $(".loaddiv").show(); }, error: function (data) { $(".loaddiv").hide(); } }); } //初始化加載第一頁(yè)數(shù)據(jù) getData(1); //生成數(shù)據(jù)html,append到div中 function insertDiv(data,page_num,pagenumber) { var $mainDiv = $(".er_list"); var result = ''; if (pagenumber<=page_num){ for (var i = 0; i < data.length; i++) { var houe_title = data[i].community_name != undefined ? data[i].community_name:data[i].business_area_name; result +='<li>'; result +='<a href="#" rel="external nofollow" >' result +='<div class="img_left"><img src='+"http://image.5i5j.com/picture/slpic/l"+data[i].img_url+'></div>' result +='<div class="img_con">' result +='<h5>'+houe_title+'</h5>' result +='<p class="ting">'+data[i].bedroom+' 室'+ data[i].livingroom+' 廳1衛(wèi)<span>·</span>'+data[i].buildarea+' ㎡<span>·</span>東南</p>' result +='<p class="info">'+data[i].district_name+'</p>' result +='<p class="tag">' result +='<em class="yell_01">不限購(gòu)</em><em class="yell_02">近地鐵</em><em class="yell_03">滿兩年</em><em class="yell_04">滿兩年</em>' result +='</p>' result +='<div class="jia"><p>'+data[i].price+' </p><span>123 /㎡</span></div>' result +='</div>' result +='</a>' result +='</li>'; } $mainDiv.append(result); // 如果加載完數(shù)據(jù)則 刪除等待加載時(shí)的圖片 if (pagenumber==page_num){ $("div").remove('#loadings') } } } //==============核心代碼============= var winH = $(window).height(); //頁(yè)面可視區(qū)域高度 var scrollHandler = function () { var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滾動(dòng)條top var aa = (pageH - winH - scrollT) / winH; if (aa < 0.02) {//0.02是個(gè)參數(shù) // 避免加載萬(wàn)書記 不停調(diào)用函數(shù) 進(jìn)行的加載 if (page_num<=rentDataPagge+1){ // 滑動(dòng)到地部 調(diào)用函數(shù) 加載數(shù)據(jù) getData(page_num); } } } //定義鼠標(biāo)滾動(dòng)事件 $(window).scroll(scrollHandler); //==============核心代碼============= //繼續(xù)加載按鈕事件 $("#btn_Page").click(function () { getData(page_num); $(window).scroll(scrollHandler); }); }); </script>
您可能感興趣的文章:
- jquery form 加載數(shù)據(jù)示例
- jquery Ajax 實(shí)現(xiàn)加載數(shù)據(jù)前動(dòng)畫效果的示例代碼
- struts2+jquery+json實(shí)現(xiàn)異步加載數(shù)據(jù)(自寫)
- 拉動(dòng)滾動(dòng)條加載數(shù)據(jù)的jquery代碼
- asp.net網(wǎng)站開發(fā)中用jquery實(shí)現(xiàn)滾動(dòng)瀏覽器滾動(dòng)條加載數(shù)據(jù)(類似于騰訊微博)
- asp.net+jquery滾動(dòng)滾動(dòng)條加載數(shù)據(jù)的下拉控件
- Asp.net利用JQuery彈出層加載數(shù)據(jù)代碼
相關(guān)文章
六款幫助你實(shí)現(xiàn)驚艷視差滾動(dòng)效果的jQuery插件
視差(Parallax)是指從不同的點(diǎn)看一個(gè)物體時(shí)形成的視覺差異,這個(gè)名詞是源自希臘文的παράλλαξις (parallaxis),意思是改變2012-09-09基于JavaScript如何實(shí)現(xiàn)ajax調(diào)用后臺(tái)定義的方法
由于ajax的獨(dú)特優(yōu)勢(shì),使得它在當(dāng)前大量網(wǎng)站得到了廣泛的應(yīng)用,下面就介紹一下ajax如何調(diào)用后臺(tái)定義的函數(shù),對(duì)ajax調(diào)用后臺(tái)方法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12jquery 圖片預(yù)加載 自動(dòng)等比例縮放插件
在圖片加載前顯示一個(gè)加載標(biāo)志,當(dāng)圖片下載完畢后顯示圖片出來(lái) 可對(duì)圖片進(jìn)行是否自動(dòng)縮放功能2008-12-12基于jQuery的$.getScript方法去加載javaScript文檔解析
下面小編就為大家?guī)?lái)一篇基于jQuery的$.getScript方法去加載javaScript文檔解析。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11jQuery控制DIV層實(shí)現(xiàn)由大到小,由遠(yuǎn)及近動(dòng)畫變化效果
這篇文章主要介紹了jQuery控制DIV層實(shí)現(xiàn)由大到小,由遠(yuǎn)及近動(dòng)畫變化效果,涉及jQuery基于animate方法操作頁(yè)面元素實(shí)現(xiàn)動(dòng)畫漸變效果的相關(guān)技巧,需要的朋友可以參考下2015-10-10jQuery 實(shí)現(xiàn)扁平式小清新導(dǎo)航
這篇文章主要介紹了jQuery 實(shí)現(xiàn)扁平式小清新導(dǎo)航,文中示例代碼非常詳細(xì),幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07jQuery中$.grep() 過(guò)濾函數(shù) 數(shù)組過(guò)濾
這篇文章主要介紹了jQuery中$.grep() 過(guò)濾函數(shù) 數(shù)組過(guò)濾的相關(guān)資料,需非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11