滚动下拉到页面底部加载数据是很多瀑布流网站的做法，那来看看配合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=cartagmode=anyformat=jsonjsoncallback=?',
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>
拉到底部就是实现异步数据加载了，当然了，实际项目还要加上如果没数据了要怎么显示，怎么操作。这些加判断就行了。
您可能感兴趣的文章:- 基于JavaScript实现鼠标向下滑动加载div的代码
- js实现滑动到页面底部自动加载更多功能
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
- 当滚动条滚动到页面底部自动加载增加内容的js代码
- js实现滚动条滚动到页面底部继续加载
- JavaScript实现页面滚动图片加载(仿lazyload效果)
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- JS图片根据鼠标滚动延时加载的实例代码
- 解析javascript瀑布流原理实现图片滚动加载
- JS简单实现滑动加载数据的方法示例
