滚动下拉到页面底部加载数据是很多瀑布流网站的做法，那来看看配合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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="/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="/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 18function show()19{20 21 if($(window).scrollTop()+$(window).height()>=$(document).height())22 {23 ajaxRead();24 }25}2627function ajaxRead()28{29 30 var html="";31 $.ajax({32type:'get',33dataType:'jsonp',34url:'/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',35beforeSend:function(){console.log('loading...')},36success:function(data){37 $.each(data.items,function(i,item){3839html+='<div class="box">';40html+='<h1>'+item.title+'</h1>';41html+='<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>'42html+='<div>'+item.tags+'</div>';43html+='</div>';44 45 });46 $("#resText").append($(html));47},48complete: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>
拉到底部就是实现异步数据加载了，当然了，实际项目还要加上如果没数据了要怎么显示，怎么操作。这些加判断就行了。
