js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例
生活随笔
收集整理的這篇文章主要介紹了
js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
轉載鏈接：http://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html
滾動下拉到頁面底部加載數據是很多瀑布流網站的做法，那來看看配合jsonp是如何實現的吧，小菜總結記錄之用，高手勿噴。
當然本例子采用的是jquery庫，后期會做成原生js。
本例的數據調用的是鋒利的jquery一書提供的一段json。
首先要先判斷頁面怎么樣才是滾動到底部，也就是scrollTop+window的height是否大于document的height，jquery如下代碼:?$(window).scrollTop()+$(window).height()>=$(document).height()；
再給window綁定scroll事件。所以整個頁面demo可以這樣做:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} p{ margin: 5px;} .box{ padding: 10px;} </style><!-- 引入jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){$(window).bind('scroll',function(){show()});function show(){if($(window).scrollTop()+$(window).height()>=$(document).height()){ajaxRead();}}function ajaxRead(){var html="";$.ajax({type:'get',dataType:'jsonp',url:'http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',beforeSend:function(){console.log('loading...')},success:function(data){$.each(data.items,function(i,item){html+='<div class="box">';html+='<h1>'+item.title+'</h1>';html+='<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>'html+='<div>'+item.tags+'</div>';html+='</div>';});$("#resText").append($(html));},complete:function(){console.log('mission acomplete.')}});} }) </script> </head> <body> <p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><div id="resText" ></div></body> </html>拉到底部就是實現異步數據加載了，當然了，實際項目還要加上如果沒數據了要怎么顯示，怎么操作。這些加判斷就行了。總結
以上是生活随笔為你收集整理的js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 栈的C语言案例,堆栈实例代码（C语言）
- 下一篇： MCMC等采样算法