滾動下拉到頁面底部加載數據是很多瀑布流網站的做法，那來看看配合jsonp是如何實現的吧，小菜總結記錄之用，高手勿噴。
當然本例子采用的是jquery庫，后期會做成原生js。
本例的數據調用的是鋒利的jquery一書提供的一段json。
首先要先判斷頁面怎么樣才是滾動到底部，也就是scrollTop+window的height是否大於document的height，jquery如下代碼: $(window).scrollTop()+$(window).height()>=$(document).height()；
再給window綁定scroll事件。所以整個頁面demo可以這樣做:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <style type="text/css"> 7 * { margin:0; padding:0;} 8 body { font-size:12px;} 9 p{ margin: 5px;} 10 .box{ padding: 10px;} 11 </style> 12 <!-- 引入jQuery --> 13 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script> 14 <script type="text/javascript"> 15 $(function(){ 16 $(window).bind('scroll',function(){show()}); 17 18 function show() 19 { 20 21 if($(window).scrollTop()+$(window).height()>=$(document).height()) 22 { 23 ajaxRead(); 24 } 25 } 26 27 function ajaxRead() 28 { 29 30 var html=""; 31 $.ajax({ 32 type:'get', 33 dataType:'jsonp', 34 url:'http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?', 35 beforeSend:function(){console.log('loading...')}, 36 success:function(data){ 37 $.each(data.items,function(i,item){ 38 39 html+='<div class="box">'; 40 html+='<h1>'+item.title+'</h1>'; 41 html+='<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>' 42 html+='<div>'+item.tags+'</div>'; 43 html+='</div>'; 44 45 }); 46 $("#resText").append($(html)); 47 }, 48 complete:function(){console.log('mission acomplete.')} 49 50 }); 51 } 52 }) 53 </script> 54 </head> 55 <body> 56 <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> 57 <div id="resText" > 58 59 </div> 60 61 </body> 62 </html>
拉到底部就是實現異步數據加載了，當然了，實際項目還要加上如果沒數據了要怎么顯示，怎么操作。這些加判斷就行了。