當(dāng)前位置：
首頁 >
jquery实现加载更多效果
發(fā)布時(shí)間：2025/4/16
42
豆豆
生活随笔
收集整理的這篇文章主要介紹了
jquery实现加载更多效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
情況是當(dāng)滑動(dòng)條滑動(dòng)到最底部的時(shí)候，數(shù)據(jù)顯示出一部分的更多
思路：獲取到瀏覽器屏幕的高度client，文檔的高度h和滑動(dòng)距離頂部的距離scroll，當(dāng)h<=client+scroll的時(shí)候就是滑動(dòng)條到了底部的時(shí)候了，
判斷好什么時(shí)候到了底部的時(shí)候，調(diào)取ajax獲取到相對應(yīng)的數(shù)據(jù)；
代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>*{margin:0px;padding:0px;}.content{width:500px;height:100%;border:1px solid red;margin:10px auto 0px;}</style></head><body><div class="content"></div><script src="js/jquery-1.7.2.js"></script><script>$(function(){ //一開始顯示數(shù)據(jù)//實(shí)際中應(yīng)該是將分頁的效果做成加載更多的效果 但是調(diào)取數(shù)據(jù)的原理 是一樣的 就是顯示數(shù)據(jù)的效果不一樣 ajax();$(document).scroll(function(){//滾動(dòng)條滑動(dòng)的時(shí)候獲取滾動(dòng)條距離頂部的距離var scroll=$(document).scrollTop();//屏幕的高度var client=$(window).height();var h=$(document).height();var flag=true;if (h<=scroll+client) { // 到達(dá)底部時(shí),加載新內(nèi)容if(flag==false){return;}ajax();}});function ajax(){$.ajax({url:'https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word=新聞',type:'GET',dataType:'jsonp',success:function(data){flag=false;setTimeout(function(){//只是模擬一下需要有個(gè)時(shí)間過程表示正在調(diào)取數(shù)據(jù)for(var i=0;i<data.result.length;i++){var result=data.result[i];var odiv='<span style="font-size:35px;margin:10px;line-height:50px;">'+result.word+'</span></br>'+'<span style="font-size:35px;margin:10px;line-height:50px;">'+result.word+'</span></br>';$(".content").append(odiv);}},500);},});};});</script></body> </html>代碼地址：https://github.com/GainLoss/load-more
因?yàn)榧虞d更多的效果其實(shí)作用和分頁是一樣的 分頁的地址：http://www.cnblogs.com/GainLoss/p/5810112.html
轉(zhuǎn)載于:https://www.cnblogs.com/GainLoss/p/6401146.html
總結(jié)
以上是生活随笔為你收集整理的jquery实现加载更多效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【bzoj1034】[ZJOI2008]
- 下一篇： java笔试之字符串反转