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条数据,当用户滚动鼠标或者使用手势将列表滑动到倒数第二 ...

随机推荐

MySQL----SQL操作
1.什么是SQL? Structured Query Language:结构化查询语言其实就是定义了操作所有关系型数据库的规则.每一种数据库操作的方式存在不一样的地方,称为“方言”. 2.SQL通用 ...
P2341 [USACO03FALL][HAOI2006]受欢迎的牛 G 题解
原题链接 POJ的链接简要题意: 给定一张图,求多少个点,每个点都能到达它. 本题作为强连通分量的入门题. 何为强连通分量?有什么用? 下面一一解释. 首先,我们要确认,这道题目如果不用强连通分量而 ...
进制-Adding Two Negabinary Numbers
2020-02-20 14:52:41 问题描述: 问题求解: 最开始的想法是将两个数字先转化成自然数在求和,最后转化回去,但是实际上这种方案是不可取的,主要的问题就是会爆掉. 那么就得按位进行运算了 ...
基础组合问题 ————从n个物品里选m个
package test; import java.util.*; public class Main{ public static int f(int n,int k, int goal){ if( ...
NASNet : Google Brain经典作，改造搜索空间，性能全面超越人工网络，继续领跑NAS领域 | CVPR 2018
论文将搜索空间从整体网络转化为卷积单元(cell),再按照设定堆叠成新的网络家族NASNet.不仅降低了搜索的复杂度,从原来的28天缩小到4天,而且搜索出来的结构具有扩展性,在小模型和大模型场景下都能 ...
批量生成sql语句,难得
在工作我们常常要批量生成sql文件,因为业务部门经常给我们的是excel文件,根据我的经验,推荐两种批量生成sql文件方式 1.excel批量生成sql ,sql语句如下 INSERT INTO Ta ...
docker安装Elasticsearch7.6集群并设置密码
docker安装Elasticsearch7.6集群并设置密码 Elasticsearch从6.8开始, 允许免费用户使用X-Pack的安全功能, 以前安装es都是裸奔.接下来记录配置安全认证的方法. ...
让你第一次认识到Java的内存管理
发现之前写的可读性不好,这次准备试试换风格,去掉长篇大论,觉得这个风格好的,麻烦点个赞啦清理.JVM的妙处大家以后都是程序员,假设你很不幸,需要自己交钱租房子. 你作为一个小穷人,租的房子到期了( ...
vue中的js引入图片，使用require相关问题
vue中的js引入图片,必须require进来或者引用网络地址 <template> <div class="home"> <img alt=&qu ...
new FileReader()
一.调用FileReader对象的方法方法名参数描述abort none 中断读取readAsBinaryString file 将文件读取为二进制码readAsDataURL file 将文件 ...

jQuery+ajax实现滚动到页面底部自动加载图文列表效果

jQuery+ajax实现滚动到页面底部自动加载图文列表效果的更多相关文章

随机推荐

热门专题