结合ajax的下拉加载/瀑布流（成功实现的案例，带实现效果图）

插播一条广告：软件设计师考试系统，送给需要参加软考的朋友们。

本人自己开发的网址：

http://94.191.14.138:8025/Html/Customer/Main.html#/Index

标题：做项目的时候正好遇到下拉加载的问题，正好抽时间研究了一下，借此分享给大家。

对瀑布流/下拉加载的个人理解：实际上就是触发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，相信大家都已经了解，不多介绍。老规矩，先上代码：

    

        

            
序号
            
姓名
            
签到顺序
            
日期
            
上班时间
            
早上时间
            
下午时间
            
上午打卡时间
            
下午打卡时间
            
其他1
            
其他2
            
其他3
            
其他4
            
其他5
            
其他6
            
办公室
        
    





    

首先是样式表，只说一个.loadingclass，这个是一个gif加载图形，当数据没有完全加载成功时出现正在加载图案。其实就是为了好看，不用也行。

重点说说script，首先需要引用jquery。Getdatasource()函数的作用是通过ajax向后台请求数据。CreateTable()方法是根据Getdatasource()获得数据动态生成table。 $(window).scroll()事件是用来触发滚动条事件的，里面加了一个settimeout事件，是为了防止多次加载。所以加了时间限制。如果去掉的话，也可以下拉加载，可能一次性会加载几百条，大家可以尝试尝试。

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

 

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