結合ajax的下拉加載/瀑布流（成功實現的案例，帶實現效果圖）

標題：做項目的時候正好遇到下拉加載的問題，正好抽時間研究了一下，藉此分享給大家。

對瀑布流/下拉加載的個人理解：實際上就是觸發scroll事件，ajax向後臺請求數據，然後動態加載出來（類似於分頁加載，換湯不換藥）。我所研究的是基於jquery例子。話不多說，先上代碼，然後再分析。

1、核心代碼

 $(window).scroll(function () {
                var scrollerh = $(document).scrollTop();
                alert(scrollerh);
                var viewbody = $(window).height();
                var allbody = $(document).height();
                if (scrollerh + viewbody > allbody - 100) {
                    alert("加載啊")
                }
            })

var scrollerh = parseInt($(window).scrollTop())   :獲得的是滾動條的高度。

var viewbody = $(window).height();                    ：獲得當前窗體可視區域的高度。

 var allbodyheight = $(document).height();          ：獲得整個文檔的高度。

if (scrollerh + viewbody > allbody - 100)               ：當滿足這個條件時就執行alert("加載啊")這個語句，當然我們想要實現下拉加                                                                                    載的功能也就是在這裏實現，添加加載數據的代碼，後面將說明。

 

2、看完了核心代碼，接下來就是實例說明了，用到的方法有ajax，相信大家都已經瞭解，不多介紹。老規矩，先上代碼：

<style>
    table,tr,td{
        border:1px solid #000;
        border-collapse:collapse;
    }
    tr{
        height:50px;
    }
    td{
        width:auto;
    }
    .loadingclass {
      position:fixed;
      height:200px;
      width:200px;
      left:50%;
      top:50%;
      margin-top:-100px;
      margin-left:-100px;
      display:none;
    }

</style>

<script>
    //存儲後臺獲得的數據
    var storearr = new Array();
    var indexpage = 1;
    var pagecount = 10;
    var mark = 1;
    var flag = true;
    $(function () {
        $(".loadingclass").css("display", "block");
        Getdatasource();
        //ajax後臺獲得數據
        function Getdatasource() {
            storearr.length = 0;
            $.ajax({
                url: "/KQ/GetBackData",
                type: "post",
                dataType: "json",
                async: true,
                data: {
                    val0: indexpage,
                    val1:pagecount
                },
                success: function (jsonResult) {
                    //if (jsonResult != null) {
                    //    $(".loadingclass").css("display", "none");
                    //}
                    //解析後臺json
                    $.each(jsonResult, function (index, value) {
                        var arr = new Array();
                        for (var x in value) {                           
                            arr.push(value[x]);
                        }
                        storearr.push(arr);
                    })
                    CreateTable();
                }
            });
        }

        //動態生成表格
        function CreateTable() {
            $(".loadingclass").css("display", "none");
            for (var i = 0; i < storearr.length; i++) {
                var trclass = "maintr" + mark;
                var tdyy = "." + trclass;
                $("#maintable").append("<tr class=" + trclass + "></tr>");
                for (var k = 0; k < storearr[i].length; k++) {
                    $(tdyy).append("<td>" + storearr[i][k] + "</td>");
                }
                mark++;
            }
            $(".loadingclass").css("display", "none");
        }

        //滑動加載，實現動態加載
        $(window).scroll(function () {
           
            var scrollh = parseInt($(window).scrollTop());
            var currentview = $(window).height();
            var allbodyheight = $(document).height();
            if (scrollh + currentview > allbodyheight - 100 && flag == true) {
                $(".loadingclass").css("display", "block");
                indexpage++;
                flag = !flag;
                Getdatasource();
                setTimeout(function termer() {
                    flag = !flag;
                }, 3000)
            }
        })
    })
</script>


<div>
    <table id="maintable">
        <tr>
            <td>序號</td>
            <td>姓名</td>
            <td>簽到順序</td>
            <td>日期</td>
            <td>上班時間</td>
            <td>早上時間</td>
            <td>下午時間</td>
            <td>上午打卡時間</td>
            <td>下午打卡時間</td>
            <td>其他1</td>
            <td>其他2</td>
            <td>其他3</td>
            <td>其他4</td>
            <td>其他5</td>
            <td>其他6</td>
            <td>辦公室</td>
        </tr>
    </table>
</div>
<div class="divzw">

</div>
<div class="loadingclass">
    <img  src="~/img/loading.gif"/>
</div>

首先是樣式表，只說一個.loadingclass，這個是一個gif加載圖形，當數據沒有完全加載成功時出現正在加載圖案。其實就是爲了好看，不用也行。

重點說說script，首先需要引用jquery。Getdatasource()函數的作用是通過ajax向後臺請求數據。CreateTable()方法是根據Getdatasource()獲得數據動態生成table。 $(window).scroll()事件是用來觸發滾動條事件的，裏面加了一個settimeout事件，是爲了防止多次加載。所以加了時間限制。如果去掉的話，也可以下拉加載，可能一次性會加載幾百條，大家可以嘗試嘗試。

最後加上我的實現圖片，沒有樣式，哈哈哈哈

 

大家如果有疑問，歡迎留言，我將及時解答。