99久久国产热无码精品免费,2021国产麻豆剧传媒精品入口

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

jQuery+ajax實(shí)現(xiàn)滾動(dòng)到頁(yè)面底部自動(dòng)加載圖文列表效果(類(lèi)似圖片懶加載)

高洛峰

發(fā)布： 2016-12-27 15:27:04

原創(chuàng)

2731人瀏覽過(guò)

本文實(shí)例講述了jquery+ajax實(shí)現(xiàn)滾動(dòng)到頁(yè)面底部自動(dòng)加載圖文列表效果。分享給大家供大家參考，具體如下：

<!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>滾動(dòng)到頁(yè)面頂部加載</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>滾動(dòng)測(cè)試</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">
    @@##@@
  </div>
  <div>
    <a href="javascript:void(0);" id="btn_Page" class="alink">查看更多>>></a>
  </div>
</body>
</html>

登錄后復(fù)制

/*endlesspage.js*/
var gPageSize = 10;
var i = 1; //設(shè)置當(dāng)前頁(yè)數(shù)，全局變量
$(function () {
  //根據(jù)頁(yè)數(shù)讀取數(shù)據(jù)
  function getData(pagenumber) {
    i++; //頁(yè)碼自動(dòng)增加，保證下次調(diào)用時(shí)為新的一頁(yè)。
    $.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();
      }
    });
  }
  //初始化加載第一頁(yè)數(shù)據(jù)
  getData(1);
  //生成數(shù)據(jù)html,append到div中
  function insertDiv(json) {
    var $mainDiv = $(".mainDiv");
    var html = '';
    for (var i = 0; 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(); //頁(yè)面可視區(qū)域高度
  var scrollHandler = function () {
    var pageH = $(document.body).height();
    var scrollT = $(window).scrollTop(); //滾動(dòng)條top
    var aa = (pageH - winH - scrollT) / winH;
    if (aa < 0.02) {//0.02是個(gè)參數(shù)
      if (i % 10 === 0) {//每10頁(yè)做一次停頓！
        getData(i);
        $(window).unbind('scroll');
        $("#btn_Page").show();
      } else {
        getData(i);
        $("#btn_Page").hide();
      }
    }
  }
  //定義鼠標(biāo)滾動(dòng)事件
  $(window).scroll(scrollHandler);
  //==============核心代碼=============
  //繼續(xù)加載按鈕事件
  $("#btn_Page").click(function () {
    getData(i);
    $(window).scroll(scrollHandler);
  });
});

登錄后復(fù)制

<%@ 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
    {
      //請(qǐng)結(jié)合實(shí)際自行取分頁(yè)數(shù)據(jù)，可調(diào)用分頁(yè)存儲(chǔ)過(guò)程
      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;
    }
  }
}

登錄后復(fù)制

[
 {
  "rowId": 1,
  "D_Id": 1,
  "D_Name": "名稱(chēng)1",
  "D_Password": "密碼測(cè)試1",
  "D_Else": "其他1"
 },
 {
  "rowId": 2,
  "D_Id": 2,
  "D_Name": "名稱(chēng)2",
  "D_Password": "密碼測(cè)試2",
  "D_Else": "其他2"
 },
 {
  "rowId": 3,
  "D_Id": 3,
  "D_Name": "名稱(chēng)3",
  "D_Password": "密碼測(cè)試3",
  "D_Else": "其他3"
 },
 {
  "rowId": 4,
  "D_Id": 4,
  "D_Name": "名稱(chēng)4",
  "D_Password": "密碼測(cè)試4",
  "D_Else": "其他4"
 },
 {
  "rowId": 5,
  "D_Id": 5,
  "D_Name": "名稱(chēng)5",
  "D_Password": "密碼測(cè)試5",
  "D_Else": "其他5"
 },
 {
  "rowId": 6,
  "D_Id": 6,
  "D_Name": "名稱(chēng)6",
  "D_Password": "密碼測(cè)試6",
  "D_Else": "其他6"
 },
 {
  "rowId": 7,
  "D_Id": 7,
  "D_Name": "名稱(chēng)7",
  "D_Password": "密碼測(cè)試7",
  "D_Else": "其他7"
 },
 {
  "rowId": 8,
  "D_Id": 8,
  "D_Name": "名稱(chēng)8",
  "D_Password": "密碼測(cè)試8",
  "D_Else": "其他8"
 },
 {
  "rowId": 9,
  "D_Id": 9,
  "D_Name": "名稱(chēng)9",
  "D_Password": "密碼測(cè)試9",
  "D_Else": "其他9"
 },
 {
  "rowId": 10,
  "D_Id": 10,
  "D_Name": "名稱(chēng)10",
  "D_Password": "密碼測(cè)試10",
  "D_Else": "其他10"
 }
]

登錄后復(fù)制

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

更多jQuery+ajax實(shí)現(xiàn)滾動(dòng)到頁(yè)面底部自動(dòng)加載圖文列表效果(類(lèi)似圖片懶加載)相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！