jquery实现加载更多效果
生活随笔
收集整理的這篇文章主要介紹了
jquery实现加载更多效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
情況是當滑動條滑動到最底部的時候，數據顯示出一部分的更多
思路：獲取到瀏覽器屏幕的高度client，文檔的高度h和滑動距離頂部的距離scroll，當h<=client+scroll的時候就是滑動條到了底部的時候了，
判斷好什么時候到了底部的時候，調取ajax獲取到相對應的數據；
代碼：
<!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(){ //一開始顯示數據//實際中應該是將分頁的效果做成加載更多的效果 但是調取數據的原理 是一樣的 就是顯示數據的效果不一樣 ajax();$(document).scroll(function(){//滾動條滑動的時候獲取滾動條距離頂部的距離var scroll=$(document).scrollTop();//屏幕的高度var client=$(window).height();var h=$(document).height();var flag=true;if (h<=scroll+client) { // 到達底部時,加載新內容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(){//只是模擬一下需要有個時間過程表示正在調取數據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
因為加載更多的效果其實作用和分頁是一樣的 分頁的地址：http://www.cnblogs.com/GainLoss/p/5810112.html
轉載于:https://www.cnblogs.com/GainLoss/p/6401146.html
總結
以上是生活随笔為你收集整理的jquery实现加载更多效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【bzoj1034】[ZJOI2008]
- 下一篇： java笔试之字符串反转