ajax自动加载列表页,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...

本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果。分享给大家供大家参考，具体如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

滚动到页面顶部加载

.mainDiv {

width: 800px;

border: solid 1px #f00;

padding: 10px;

}

.item {

width: 600px;

height: 50px;

border: solid 1px #00ff90;

font-size: 12px;

margin: 10px;

}

.title {

font-size: 16px;

line-height: 20px;

}

.content {

line-height: 14px;

}

.alink

{

display:none;

}

.loaddiv

{

display:none;

}

滚动测试

查看更多>>>

/*endlesspage.js*/

var gPageSize = 10;

var i = 1; //设置当前页数，全局变量

$(function () {

//根据页数读取数据

function getData(pagenumber) {

i++; //页码自动增加，保证下次调用时为新的一页。

$.get("/ajax/Handler.ashx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) {

if (data.length > 0) {

var jsonObj = 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) {

var jsonObj = JSON.parse(data);

insertDiv(jsonObj);

}

},

beforeSend: function () {

$(".loaddiv").show();

},

error: function () {

$(".loaddiv").hide();

}

});

}

//初始化加载第一页数据

getData(1);

//生成数据html,append到div中

function insertDiv(json) {

var $mainDiv = $(".mainDiv");

var html = '';

for (var i = 0; i < json.length; i++) {

html += '

';

html += '

' + json[i].rowId + ' ' + json[i].D_Name + '

';

html += '

' + json[i].D_Name + ' ' + json[i].D_Password + '

';

html += '

';

}

$mainDiv.append(html);

}

//==============核心代码=============

var winH = $(window).height(); //页面可视区域高度

var scrollHandler = function () {

var pageH = $(document.body).height();

var scrollT = $(window).scrollTop(); //滚动条top

var aa = (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);

});

});

using System;

using System.Web;

using System.Data;

using MSCL;

using Newtonsoft.Json;

public class Handler : IHttpHandler {

public void ProcessRequest(HttpContext context)

{

//核心处理程序

string pageSize = context.Request["pagesize"];

string pageIndex = context.Request["pagenumber"];

if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(pageIndex))

{

context.Response.Write("");

}

else

{

//请结合实际自行取分页数据，可调用分页存储过程

MSCL.PageHelper p = new PageHelper();

p.CurrentPageIndex = Convert.ToInt32(pageIndex);

p.FieldsName = "*";

p.KeyField = "d_id";

p.SortName = "d_id asc";

p.TableName = "testtable";

p.EndCondition = "count(*)";

p.PageSize = Convert.ToInt32(pageSize);

DataTable dt = p.QueryPagination();

string json = JsonConvert.SerializeObject(dt, Formatting.Indented);

context.Response.Write(json);

}

}

public bool IsReusable {

get {

return false;

}

}

}

[

{

"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数据操作小编推荐几个本站的在线工具供大家参考，相信在以后的开发中可以派上用场：

希望本文所述对大家jQuery程序设计有所帮助。