scroll实现瀑布流原理，数据获取使用getJSON。
2013-11-03 01:44
531 查看
1，使用scroll事件触发事件。
2，通过$(window).scrollTop();$(document).height();$(window).height();获取页面元素值，相减获取页面距底部的值。
3，根据weNeed值，进行判断，然后调用getJSON方法，获取后台json值（php中，jsonencode只能处理utf8数据，这个需要注意），然后用each方法循环获取值，然后进行赋值。
4，通过flag控制方法执行次数，保证到底部后，getJSON方法在条件内执行一次。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="content-type" content="text/html;charset=gbk" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-1.10.js"></script>
<style>
#monitor {//测试用
position:fixed;
top:10px;
left:20px;
z-index:999;
}
</style>
<script>
$(document).ready(function(){
var flag=false;
var i=1;
$(window).scroll(function(){
var sDistance=$(window).scrollTop();
var dHeight=$(document).height();
var wHeight=$(window).height();
var toBottomDis=dHeight-sDistance;
var weNeed=toBottomDis-wHeight;//底部某一数据显示时，触发高度值。
//$("#monitor").html("1111111111111111111网页高度减去滚动的高度:"+toBottomDis+", 滚动了多少:"+sDistance+" 浏览器窗口高度:"+wHeight+"weNeed:"+weNeed+"dHeight"+dHeight);
if(!flag&&weNeed<=160){
flag=true;
$.getJSON('http://www.getjson.com/index.php?i='+i,function(j){
if(j){
$.each(j,function(index,array){
var str = "<li><a href="+array['url']+">"+array['id']+"-"+array['title']+"<\/a><\/li>";
$("#showList").append(str);
});
i++;
}else{
$(".nodata").show().html("<hr>没有数据了！");
return false;
}
flag=false;
});
}
if(!flag&&weNeed>160){
flag=false;
}
});
});
</script>
</head>
<body>
<div id="monitor" ></div><!--此div用于测试--><br><br>
<ul id="showList">
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li>
</ul>
<input type="button" id="showmore" value="显示更多">
<div class="nodata"></div>
</body>
</html>
2，通过$(window).scrollTop();$(document).height();$(window).height();获取页面元素值，相减获取页面距底部的值。
3，根据weNeed值，进行判断，然后调用getJSON方法，获取后台json值（php中，jsonencode只能处理utf8数据，这个需要注意），然后用each方法循环获取值，然后进行赋值。
4，通过flag控制方法执行次数，保证到底部后，getJSON方法在条件内执行一次。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="content-type" content="text/html;charset=gbk" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-1.10.js"></script>
<style>
#monitor {//测试用
position:fixed;
top:10px;
left:20px;
z-index:999;
}
</style>
<script>
$(document).ready(function(){
var flag=false;
var i=1;
$(window).scroll(function(){
var sDistance=$(window).scrollTop();
var dHeight=$(document).height();
var wHeight=$(window).height();
var toBottomDis=dHeight-sDistance;
var weNeed=toBottomDis-wHeight;//底部某一数据显示时，触发高度值。
//$("#monitor").html("1111111111111111111网页高度减去滚动的高度:"+toBottomDis+", 滚动了多少:"+sDistance+" 浏览器窗口高度:"+wHeight+"weNeed:"+weNeed+"dHeight"+dHeight);
if(!flag&&weNeed<=160){
flag=true;
$.getJSON('http://www.getjson.com/index.php?i='+i,function(j){
if(j){
$.each(j,function(index,array){
var str = "<li><a href="+array['url']+">"+array['id']+"-"+array['title']+"<\/a><\/li>";
$("#showList").append(str);
});
i++;
}else{
$(".nodata").show().html("<hr>没有数据了！");
return false;
}
flag=false;
});
}
if(!flag&&weNeed>160){
flag=false;
}
});
});
</script>
</head>
<body>
<div id="monitor" ></div><!--此div用于测试--><br><br>
<ul id="showList">
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li><li>测试数据1</li>
<li>测试数据1</li>
</ul>
<input type="button" id="showmore" value="显示更多">
<div class="nodata"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用Jquery的getJSON跨域请求蘑菇街图片资源实现瀑布流
- Android中使用HttpURLConnection实现GET POST JSON数据与下载图片
- jQuery 使用 $.getJSON() 跨域获取 JSON 数据
- Android中如何使用HttpURLConnection实现GET POST JSON数据
- 为您解惑：jQuery中$.getJSON( )的使用方法简介之获取JSON格式的数据.........
- jquery的ajax和getJson跨域获取json数据的实现方法
- 使用fastjson与SpringMVC实现自定义HttpMessageConverter接收和获取JSON格式的数据
- 通过使用getJSON异步获取json数据文件并绑定事件处理函数
- jquery的ajax和getJson跨域获取json数据的实现方法
- js实现获取页面数据转为Json数据并使用
- IT忍者神龟之jQuery 使用 $.getJSON() 跨域获取 JSON 数据
- Android使用AsyncTask异步线程网络通信获取数据（get json）
- jQuery使用getJSON方法获取json数据完整示例
- HttpClient使用HttpGet获取Json数据出现部分数据乱码的情况
- 页面使用$.getJSON只获取一次数据，导致多个请求返回的都是第一个结果
- JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
- Android中使用HttpURLConnection实现GET POST JSON数据与下载图片
- Android中使用HttpURLConnection实现GET POST JSON数据与下载图片
- C#使用GET方法获取网络上的JSON数据
- 使用基于Android网络通信的OkHttp库实现Get和Post方式简单操作服务器JSON格式数据