jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>滚动到页面顶部加载</title>
<scriptsrc="js/jquery-1.11.1.min.js"type="text/javascript"></script>
<scriptsrc="js/endlesspage.js"type="text/javascript"></script>
<styletype="text/css">
.mainDiv{
width:800px;
border:solid1px#f00;
padding:10px;
}
.item{
width:600px;
height:50px;
border:solid1px#00ff90;
font-size:12px;
margin:10px;
}
.title{
font-size:16px;
line-height:20px;
}
.content{
line-height:14px;
}
.alink
{
display:none;
}
.loaddiv
{
display:none;
}
</style>
</head>
<body>
<h1>滚动测试</h1>
<divclass="mainDiv">
<!--<divclass="item">
<divclass="title">title</div>
<divclass="content">contentcontentcontentcontentcontentcontentcontent</div>
</div>
-->
</div>
<divclass="loaddiv">
<imgsrc="images/loading.gif"/>
</div>
<div>
<ahref="javascript:void(0);"id="btn_Page"class="alink">查看更多>>></a>
</div>
</body>
</html>
/*endlesspage.js*/
vargPageSize=10;
vari=1;//设置当前页数，全局变量
$(function(){
//根据页数读取数据
functiongetData(pagenumber){
i++;//页码自动增加，保证下次调用时为新的一页。
$.get("/ajax/Handler.ashx",{pagesize:gPageSize,pagenumber:pagenumber},function(data){
if(data.length>0){
varjsonObj=JSON.parse(data);
insertDiv(jsonObj);
}
});
$.ajax({
type:"post",
url:"/ajax/Handler.ashx",
data:{pagesize:gPageSize,pagenumber:pagenumber},
dataType:"json",
success:function(data){
$(".loaddiv").hide();
if(data.length>0){
varjsonObj=JSON.parse(data);
insertDiv(jsonObj);
}
},
beforeSend:function(){
$(".loaddiv").show();
},
error:function(){
$(".loaddiv").hide();
}
});
}
//初始化加载第一页数据
getData(1);
//生成数据html,append到div中
functioninsertDiv(json){
var$mainDiv=$(".mainDiv");
varhtml='';
for(vari=0;i<json.length;i++){
html+='<divclass="item">';
html+='<divclass="title">'+json[i].rowId+''+json[i].D_Name+'</div>';
html+='<divclass="content">'+json[i].D_Name+''+json[i].D_Password+'</div>';
html+='</div>';
}
$mainDiv.append(html);
}
//==============核心代码=============
varwinH=$(window).height();//页面可视区域高度
varscrollHandler=function(){
varpageH=$(document.body).height();
varscrollT=$(window).scrollTop();//滚动条top
varaa=(pageH-winH-scrollT)/winH;
if(aa<0.02){//0.02是个参数
if(i%10===0){//每10页做一次停顿！
getData(i);
$(window).unbind('scroll');
$("#btn_Page").show();
}else{
getData(i);
$("#btn_Page").hide();
}
}
}
//定义鼠标滚动事件
$(window).scroll(scrollHandler);
//==============核心代码=============
//继续加载按钮事件
$("#btn_Page").click(function(){
getData(i);
$(window).scroll(scrollHandler);
});
});
<%@WebHandlerLanguage="C#"Class="Handler"%>
usingSystem;
usingSystem.Web;
usingSystem.Data;
usingMSCL;
usingNewtonsoft.Json;
publicclassHandler:IHttpHandler{
publicvoidProcessRequest(HttpContextcontext)
{
//核心处理程序
stringpageSize=context.Request["pagesize"];
stringpageIndex=context.Request["pagenumber"];
if(string.IsNullOrEmpty(pageSize)||string.IsNullOrEmpty(pageIndex))
{
context.Response.Write("");
}
else
{
//请结合实际自行取分页数据，可调用分页存储过程
MSCL.PageHelperp=newPageHelper();
p.CurrentPageIndex=Convert.ToInt32(pageIndex);
p.FieldsName="*";
p.KeyField="d_id";
p.SortName="d_idasc";
p.TableName="testtable";
p.EndCondition="count(*)";
p.PageSize=Convert.ToInt32(pageSize);
DataTabledt=p.QueryPagination();
stringjson=JsonConvert.SerializeObject(dt,Formatting.Indented);
context.Response.Write(json);
}
}
publicboolIsReusable{
get{
returnfalse;
}
}
}
[
{
"rowId":1,
"D_Id":1,
"D_Name":"名称1",
"D_Password":"密码测试1",
"D_Else":"其他1"
},
{
"rowId":2,
"D_Id":2,
"D_Name":"名称2",
"D_Password":"密码测试2",
"D_Else":"其他2"
},
{
"rowId":3,
"D_Id":3,
"D_Name":"名称3",
"D_Password":"密码测试3",
"D_Else":"其他3"
},
{
"rowId":4,
"D_Id":4,
"D_Name":"名称4",
"D_Password":"密码测试4",
"D_Else":"其他4"
},
{
"rowId":5,
"D_Id":5,
"D_Name":"名称5",
"D_Password":"密码测试5",
"D_Else":"其他5"
},
{
"rowId":6,
"D_Id":6,
"D_Name":"名称6",
"D_Password":"密码测试6",
"D_Else":"其他6"
},
{
"rowId":7,
"D_Id":7,
"D_Name":"名称7",
"D_Password":"密码测试7",
"D_Else":"其他7"
},
{
"rowId":8,
"D_Id":8,
"D_Name":"名称8",
"D_Password":"密码测试8",
"D_Else":"其他8"
},
{
"rowId":9,
"D_Id":9,
"D_Name":"名称9",
"D_Password":"密码测试9",
"D_Else":"其他9"
},
{
"rowId":10,
"D_Id":10,
"D_Name":"名称10",
"D_Password":"密码测试10",
"D_Else":"其他10"
}
]
PS：这里还涉及json格式数据的交互操作，关于json数据操作小编推荐几个本站的在线工具供大家参考，相信在以后的开发中可以派上用场：
在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json
在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson
json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat
C语言风格/HTML/CSS/json代码格式化美化工具：
http://tools.jb51.net/code/ccode_html_css_json
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。