jQuery+ajax实现滚动到页面底部自动加载图文列表效果
<!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>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/endlesspage.js" type="text/javascript"></script>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<h1>滚动测试</h1>
<div class="mainDiv">
<!--<div class="item">
<div class="title">title</div>
<div class="content">content content content content content content content</div>
</div>
-->
</div>
<div class="loaddiv">
<img src="data:images/loading.gif" />
</div>
<div>
<a href="javascript:void(0);" id="btn_Page" class="alink">查看更多>>></a>
</div>
</body>
</html>
/*endlesspage.js*/
var gPageSize = ;
var i = ; //设置当前页数，全局变量
$(function () {
//根据页数读取数据
function getData(pagenumber) {
i++; //页码自动增加，保证下次调用时为新的一页。
$.get("/ajax/Handler.ashx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) {
if (data.length > ) {
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 > ) {
var jsonObj = JSON.parse(data);
insertDiv(jsonObj);
}
},
beforeSend: function () {
$(".loaddiv").show();
},
error: function () {
$(".loaddiv").hide();
}
});
}
//初始化加载第一页数据
getData();
//生成数据html,append到div中
function insertDiv(json) {
var $mainDiv = $(".mainDiv");
var html = '';
for (var i = ; i < json.length; i++) {
html += '<div class="item">';
html += ' <div class="title">' + json[i].rowId + ' ' + json[i].D_Name + '</div>';
html += ' <div class="content">' + json[i].D_Name + ' ' + json[i].D_Password + '</div>';
html += '</div>';
}
$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页做一次停顿！
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);
});
});
<%@ WebHandler Language="C#" Class="Handler" %>
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": ,
"D_Id": ,
"D_Name": "名称1",
"D_Password": "密码测试1",
"D_Else": "其他1"
},
{
"rowId": ,
"D_Id": ,
"D_Name": "名称2",
"D_Password": "密码测试2",
"D_Else": "其他2"
},
{
"rowId": ,
"D_Id": ,
"D_Name": "名称3",
"D_Password": "密码测试3",
"D_Else": "其他3"
},
{
"rowId": ,
"D_Id": ,
"D_Name": "名称4",
"D_Password": "密码测试4",
"D_Else": "其他4"
},
{
"rowId": ,
"D_Id": ,
"D_Name": "名称5",
"D_Password": "密码测试5",
"D_Else": "其他5"
},
{
"rowId": ,
"D_Id": ,
"D_Name": "名称6",
"D_Password": "密码测试6",
"D_Else": "其他6"
},
{
"rowId": ,
"D_Id": ,
"D_Name": "名称7",
"D_Password": "密码测试7",
"D_Else": "其他7"
},
{
"rowId": ,
"D_Id": ,
"D_Name": "名称8",
"D_Password": "密码测试8",
"D_Else": "其他8"
},
{
"rowId": ,
"D_Id": ,
"D_Name": "名称9",
"D_Password": "密码测试9",
"D_Else": "其他9"
},
{
"rowId": ,
"D_Id": ,
"D_Name": "名称10",
"D_Password": "密码测试10",
"D_Else": "其他10"
}
]
jQuery+ajax实现滚动到页面底部自动加载图文列表效果的更多相关文章
- Jquery+php鼠标滚动到页面底部自动加载更多内容,使用分页
1.index.php <style type="text/css"> #container{margin:10px auto;width: 660px; border ...
- 当滚动条滚动到页面底部自动加载增加内容的js代码
这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...
- Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
index.php代码 [html] view plaincopy <!DOCTYPE html PUBLIC ;} .single_item{padding: ...
- vue 实现滚动到页面底部开始加载更多
直接上代码: <template> <div class="newsList"> <div v-for="(items, index) in ...
- vue使用H5实现滚动到页面底部时加载数据
使用原生vue实现瀑布流,发现无法实现小程序那种滚动到地步触发加载效果,只能自己研究了 实现效果: 实现代码: 首先添加监听滚动事件 mounted() { window.addEventListen ...
- jquery 页面滚动到底部自动加载插件集合
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...
- 利用Jquery的load函数实现页面的动态加载
利用Jquery的load函数实现页面的动态加载 js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...
- UWP-ListView到底部自动加载更多数据
原文:UWP-ListView到底部自动加载更多数据 ListView绑定的数据当需要“更多”时自动加载 ListView划到底部后,绑定的ObservableCollection列表数据需要加载的更 ...
- 分享大麦UWP版本开发历程-03.GridView或ListView 滚动底部自动加载后续数据
今天跟大家分享的是大麦UWP客户端,在分类.订单或是搜索时都用到的一个小技巧,技术粗糙大神勿喷. 以大麦分类举例,默认打开的时候,会为用户展示20条数据,当用户滚动鼠标或者使用手势将列表滑动到倒数第二 ...
随机推荐
- Java后台面试记录
腾讯一面: 总结:考基础和代码(网址A是不是网址B的子域) + SQL(选出重复邮箱)(以下是没回答上来的) 逻辑回归公式(简历上写了协同过滤) 详见:https://blog.csdn.net/ma ...
- 使用burp插件captcha-killer识别图片验证码
0x01 开发背景 说起对存在验证码的登录表单进行爆破,大部分人都会想到PKav HTTP Fuzzer,这款工具在前些年确实给我们带来了不少便利.反观burp一直没有一个高度自定义通杀大部分图片验证 ...
- 《HelloGitHub》第 48 期
兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...
- JSP（三）----EL表达式
## EL表达式 1.概念:Expression alnguage 表达式语言 2.作用:替换和简化JSP页面中java代码的编写 3.语法:${表达式} 4.注意: * jsp默认支持EL表 ...
- [最短路,最大流最小割定理] 2019 Multi-University Training Contest 1 Path
题目:http://acm.hdu.edu.cn/showproblem.php?pid=6582 Path Time Limit: 2000/1000 MS (Java/Others) Mem ...
- 【前端词典】这些功能其实不需要 JS，CSS 就能搞定
前言 今天我们大家介绍一些你可能乍一眼以为一定需要 JavaScript 才能完成的功能,其实 CSS 就能完成,甚至更加简单. 内容已经发布在 gitHub 了,欢迎围观 Star,更多文章都在 g ...
- Redis 6.0 新增功能 - ACL
Redis 6.0 ACL 期待已久的ACL终于来了,大家知道在redis集群中只有一个db,在多项目操作时可以通过key前缀来区分,但是还是能获取其它key,这样就带来了安全风险. Access C ...
- 一、配置Ubuntu网络设置大纲
root@ubuntu:为我的Ubuntu系统,即 用户名@主机名: 1.改主机名 ifconfig查询本机IP地址vim /etc/hostname进入i编辑更改,改完按esc键 然后:wq!保存 ...
- Go深入学习之select
select的用法 1)select只能用于channel的操作(写入.读出),而switch则更通用一些 2)select的case是随机的,而switch里的case是顺序执行 3)select要 ...
- Python第十一章-常用的核心模块04-datetime模块
python 自称 "Batteries included"(自带电池, 自备干粮?), 就是因为他提供了很多内置的模块, 使用这些模块无需安装和配置即可使用. 本章主要介绍 py ...