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

随机推荐

201771010111-李瑞红实验一软件工程准备-<构建之法-现代软件工程-基础认识和理解>
|||||||| | :--
Recursive-Brace Expansion II
2019-11-26 11:05:10 1096. Brace Expansion II 问题描述: 问题求解: 经典的字符串扩展问题. 一般来说这种问题有两种解法,一个是采用stack,一个是采用r ...
DeepMind爆出无监督表示学习模型BigBiGAN，GAN之父点赞！
[导读]今天,DeepMind爆出一篇重磅论文,引发学术圈热烈反响:基于最强图像生成器BigGAN,打造了BigBiGAN,在无监督表示学习和图像生成方面均实现了最先进的性能!Ian Goodfell ...
coding++：使用 javascript 在html中获取url参数
函数处理定义如下: < script type = "text/javascript" > function $G() { var Url = top.window.l ...
n次方
1.问题描述计算 an 2.算法分析先将 n 变一变,寻找新的计算路径.预处理就是变治法的根本. 如果单纯循环执行 n 次相乘,那么时间复杂度为 O(n).可以利用二进制幂大大改进效率. 主要思路 ...
【宇哥带你玩转MySQL】索引篇(一)索引揭秘，看他是如何让你的查询性能指数提升的
场景复现,一个索引提高600倍查询速度? 首先准备一张books表 create table books( id int not null primary key auto_increment, na ...
[vijos1234]口袋的天空<最小生成树>
题目链接:https://vijos.org/p/1234 白天刚刚写完prim的算法,晚上就心血来潮的打了一道最小生成树的题虽然有题解说可以用prim做,但是这道题明显是加最小的边,感觉krusk ...
Git之旅
ithub安装,我选择的是windows下的版本. git配置用户信息安装完成后,还需要最后一步设置,在命令行输入: $git config --global user.name "You ...
vulnhub~incllusiveness
这个机子相对简单一点,但是也是从中发现了自己不少问题技能一: nmap 扫描发现了21,22 ,80三个端口,并且ftp服务允许匿名登录,在pub目录下面有writeable权限,这就好办了.我以 ...
从零开始，做一个简单的Vuetify项目，图标安装成功
安装Vuefity的时候,碰到一些坑,经过一番折腾,终于成功,记录正确的姿势如下: 创建一个Vue项目: vue init webpack-simple vular-admin 进入项目目录: cd ...

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

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

随机推荐

热门专题