滚动下拉到页面底部加载数据是很多瀑布流网站的做法，那来看看配合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){
                                
                                   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>

拉到底部就是实现异步数据加载了，当然了，实际项目还要加上如果没数据了要怎么显示，怎么操作。这些加判断就行了。