http://index.jsx6.com/瀑布流加载.zip

-----------------------------最简单的demo示例--------------------------------------------------------

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流加载精简代码</title>
</head>
<body>
<div id="box_father">
    <ul>
        <li class="box_son">这是要输出的数据</li>
    </ul>
</div>
</body>
<!--引入js加载文件-->
<script src="pbjz.js"></script>
</html>
 
  


---------------------------下面是js文件内的代码----------------------------------
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
  
    $(function () {
        //box元素内部追加
        var container = $("#box_father< /FONT > ");
        //循环输出的元素
        var loading = $(".box_son< /FONT > ");
 
        // 初始化loading状态
        var loading_start = false;
        //滚动条触发方法
        $(window).scroll(function () {
            if (loading_start) return false;
            // 计算所有瀑布流块中距离顶部最大,进而在滚动条滚动时,来进行ajax请求
            var itemNum = container.find('. box_son' < / FONT >).length;
            //计算要开始加载的位置
            var maxTop = container.find('.box_son' < / FONT >).eq(-2).offset().top;
            //console.log(maxTop)
            //当前滚动条的位置
            var current_Top = $(window).height() + $(document).scrollTop()
            //开始调用ajax进行追加元素
            if (maxTop > current_Top) {
                //加载更多数据
                loading_start = true
                //当被追加元素大于60时,停止请求数据
                if (itemNum > 60) {
                    alert("没有啦")
                else {
                    /*模拟ajax请求数据时延时800毫秒*/
                    var time = setTimeout(function () {
                        $.ajax({
                            dataType: "json",
                            url: 'url',
                            data: {pa: itemNum},
                            success: function (e) {
                                //判断响应,赋值
                                if (e.error == "200") {
                                    //拼接数据
                                    $.each(e.msg, function (i, s) {
 
                                        var HTML = '<li>' + s.name + '</li>'
                                        //内部追加
                                        container.append(HTML)
                                    })
                                }
                            }
                        })
                        loading_start = false;
                        clearTimeout(time);
                    }, 800)
                }
            }
        })
 
    })
 
  

 

---------------------------------------------------------------------------------------------
唯有志存高远,方能风行天下。

道之所存,虽千万人吾往矣! 情之所钟,虽千万里吾念矣~

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。