结合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事件，是为了防止多次加载。所以加了时间限制。如果去掉的话，也可以下拉加载，可能一次性会加载几百条，大家可以尝试尝试。

最后加上我的实现图片，没有样式，哈哈哈哈

大家如果有疑问，欢迎留言，我将及时解答。