滚动下拉到页面底部加载数据是很多瀑布流网站的做法，那来看看配合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>
往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉
<div id="resText" >
</div>
</body>
</html>
