首页 > 代码库 > 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

2024-07-05 08:55:17   223人阅读

瀑布流加载显示数据，在当下已经用的很普遍，尤其是我们在做网上商城时，在产品列表页面已经被普遍使用。

对于实现瀑布流布局的解决方案主要有以下两种方式：

1、对每一条显示数据使用绝对定位+浮动的方式，这样也会有一个问题----必须要知道每一条信息的具体高宽度

2、采用列布局，将每一条数据依次放置到每一列

 

其实两者的实现原理都是大同小异，现在我将针对第二种解决方案，用一个具体的事例来说明

 

?
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!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></title>
    <style type="text/css">
    body,ul,li{margin:0;margin:0;}
    ul{list-style:none;}
    .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}
    /*瀑布流*/
    /*.wallList{width:860px;}*/
    .wallList li{float:left;display:inline;margin-right:16px;}
    .wallList li a{background:#eee;border:1px solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;}
    .wallList li a:hover{border-color:#f60;}
    .wallList li .name{display:block;text-align:center;padding:8px 0;}
 
    .loadTips{text-align:center;padding:15px 0;}
    </style>
</head>
<body>
    <div class="wallList" id="wallList">
        <ul class="clearfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <p class="loadTips" id="loadTips">
            19880902 <span>正在加载......</span></p>
    </div>
</body>
</html>
<script src=http://www.mamicode.com/"jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    // 数据格式
    var testJson = {
        "status": 1,
        "data": [
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "图片1" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "图片2" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "图片3" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片4" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片5" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x260/eee/fff", "width": 240, "height": 260, "name": "图片6" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "图片7" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "图片8" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x265/B5E61D/fff", "width": 240, "height": 265, "name": "图片9" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x245/259/fff", "width": 240, "height": 245, "name": "图片10" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x310/B5E61D/fff", "width": 240, "height": 310, "name": "图片11" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片12" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x150/B5E61D/fff", "width": 240, "height": 150, "name": "图片13" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x165/B5E61D/fff", "width": 240, "height": 165, "name": "图片14" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x100/B5E61D/fff", "width": 240, "height": 100, "name": "图片15" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片16" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x225/B5E61D/fff", "width": 240, "height": 225, "name": "图片17" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片18" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片19" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片20" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "图片21" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "图片22" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "图片23" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片24" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片25" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/eee/fff", "width": 240, "height": 210, "name": "图片26" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "图片27" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "图片28" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x195/B5E61D/fff", "width": 240, "height": 195, "name": "图片29" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片30" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "图片31" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "图片32" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "图片33" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片34" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片35" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/eee/fff", "width": 240, "height": 210, "name": "图片36" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "图片37" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "图片38" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x195/B5E61D/fff", "width": 240, "height": 195, "name": "图片39" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x245/259/fff", "width": 240, "height": 245, "name": "图片40" }
        ]
    }
 
    var wallPic = function () {
        var $target = $(‘#wallList‘),
            $li = $target.find(‘li‘),
            $tips = $(‘#loadTips‘),
            oTop = 0, //滚动判断的值
            row = 5, //列数
            page = 1, //ajax请求的页码值
            url = ‘xxxx‘, //ajax请求地址
            on_off = true; //插入结构的开关，防止ajax错误性多次加载数据
 
        return {
            fillData: function (callback) {
                var _that = this;
                on_off = false;
                /* ajax
                --------------------*/
                // $.get(url,{ page:page,count:30 },function(json){
                //     if(json.status==1){
                //         _that.appendHTML(json.data);
                //         on_off = true;
                //         page++;
                //     }else{
                //         _that.loadedTips();
                //     }
                // },‘json‘);
 
                /* 模拟测试-设置定时器模拟ajax请求数据
                -----------------------*/
                setTimeout(function () {
                    // 模拟终止
                    if (page == 5) {
                        _that.loadedTips();
                        return;
                    }
                    _that.appendHTML(testJson.data);
                    on_off = true;
                    page++;
                }, 400);
            },
            appendHTML: function (data) {
                var len = data.length,
                    n = 0;
                for (; n < len; n++) {
 
                    /*每次都将数据加载到高度最小的LI中---最终实现所有li高度都大致相当*/
                    var minHeight = Math.min.apply(null, [$li.eq(0).height(), $li.eq(1).height(), $li.eq(2).height(), $li.eq(3).height(), $li.eq(4).height()]);
                    for (var j = 0; j < 5; j++) {
                        if (minHeight == $li.eq(j).height()) {
                            $li[j].innerHTML += ‘<a href="http://www.mamicode.com/‘ + data[n].href + ‘" target="_blank"><img src="http://www.mamicode.com/‘ + data[n].src + ‘" width="‘ + data[n].width + ‘" height="‘ + data[n].height + ‘" alt="‘ + data[n].name + ‘" /><span class="name">‘ + page * n + data[n].name + ‘</span></a>‘;
                            break;
                        }
                    }
                    /*依次均与的将数据分布到每一列中---将会出现有的li高度会很大
                    var k = 0;
                    n > (row - 1) ? k = n % row : k = n;
                    $li[k].innerHTML += ‘<a href="http://www.mamicode.com/‘ + data[n].href + ‘" target="_blank"><img src="http://www.mamicode.com/‘ + data[n].src + ‘" width="‘ + data[n].width + ‘" height="‘ + data[n].height + ‘" alt="‘ + data[n].name + ‘" /><span class="name">‘ + data[n].name + ‘</span></a>‘;
                    */
                }
                this.getOTop();
            },
            getOTop: function () {
                oTop = Math.min.apply(null, [$li.eq(0).height(), $li.eq(1).height(), $li.eq(2).height()]) + $target.offset().top;
            },
            loadedTips: function () {  //数据加载完毕
                $(‘#loadTips‘).find(‘span‘).text(‘数据已加载完‘);
                setTimeout(function () {
                    $(‘#loadTips‘).css({ ‘visibility‘: ‘hidden‘ });
                }, 200);
                // 解绑事件
                $(window).unbind(‘scroll‘, $.proxy(this.scrollEvent, this));
            },
            scrollEvent: function () {//鼠标滚轮事件
                if ($(document).scrollTop() + $(window).height() > oTop && on_off) {
                    this.fillData();
                }
            },
            init: function () {//开始执行事件
                this.fillData();
                $(window).bind(‘scroll‘, $.proxy(this.scrollEvent, this));
            }
        }
    } ();
    wallPic.init();
</script>

　　


联系
我们