瀑布流,纵向

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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
/*
瀑布流封装
   2016.4.27 by WJ
 
@param containerId  容器ID
@param nline        列数
@param nWidth       容器宽度
@param nBoxWidth    元素实际所占宽度
@param nMarginLeft  元素的margin
@param nMarginTop   元素的margin
@param getData      function
@param onFinish     function
*/
function waterfall(containerId, nline, nWidth, nBoxWidth, nMarginLeft, nMarginTop, getData, onFinish) {
 
    var line = nline || 4,
        width = nWidth || 1180,
        boxWidth = nBoxWidth || 295,
        marginLeft = nMarginLeft || 0,
        marginTop = nMarginTop || 0;
 
    var i;
    var cache = [];       //缓存当前读到的数据
    var imgCache = []     //缓存图片数据
    var index = 1;        //第几组数据调用(页码)
    var flag = true;      //是否可读取数据(避免重复读取)
 
    //统计每列的当前高度
    var lineArr = [];
    var lineArrBf = []; //备份
    for (i = 0; i < line; i++) {
        lineArr.push(0);
        lineArrBf.push(0);
    }
 
    //最大值
    Array.prototype.max = function () {
        return Math.max.apply({}, this)
    }
    //最小值
    Array.prototype.min = function () {
        return Math.min.apply({}, this)
    }
 
    //ul容器
    var container = document.getElementById(containerId);
    container.style.position = "relative";
 
 
    //缓存图片(将图片有序地加入数组,并触发图片加载)
    var printFall = function () {
        imgCache = []
        for (i = 0; i < cache.length; i++) {
            var imagethis = new Image();
            imagethis.onload = function () { chn(this); }
            imagethis.onerror = function () { chn(this); }
            imagethis.src = cache[i].c;
            imgCache.push(imagethis)
        }
    }
 
    //每张图片加载完成后都会触发本事件(输出元素到页面上)
    var chn = function (img) {
        var k = 0, j = 0, i = 0, m = 0, n = 0,
            temp;
        var li, liId, thisbox, liList, thisLiid, thisliIdNum;
 
        //标记本条数据的图片已加载完成
        for (k = 0; k < cache.length; k++) {
            if (imgCache[k] === img) {
                temp = cache[k];
                temp = { "a": 1, "b": temp.b, "c": temp.c }
                cache[k] = temp;
                break;
            }
        }
 
        var thisflag = true;
 
        for (i = 0; i < cache.length; i++) {
            if (cache[i].a == 1) {
                li = document.createElement("li");
                liId = "grid_" + index + "_" + i
                li.id = liId;
                li.innerHTML = cache[i].b;
                thisbox = document.getElementById(liId);
                if (!thisbox) {
 
                    //读取本组的所有已输出的元素
                    liList = $("li[id^='grid_" + index + "_']");
                    for (m = 0, len = liList.length; m < len; m++) {
                        thisLiid = liList[m].id;
                        thisliIdNum = parseInt(thisLiid.split('_')[2]);
                        if (thisliIdNum > i) {
                            break;
                        }
                    }
                    if (m >= liList.length) {
                        container.appendChild(li);
                        fixLi(li);
                    } else {
                        //有序地插入队中
                        container.insertBefore(li, liList[m]);
                        //调整本组元素的定位
                        //复位
                        for (n = 0; n < line; n++) {
                            lineArr[n] = lineArrBf[n];
                        }
                        //重铺
                        liList = $("li[id^='grid_" + index + "_']");
                        for (n = 0, len = liList.length; n < len; n++) {
                            fixLi(liList[n]);
                        }
                    }
                }
            } else {
                thisflag = false;
            }
        }
 
        //修改容器的高度
        var maxLine = lineArr.max();
        container.style.height = maxLine + 'px';
 
        if (thisflag && !flag) {
            //本组图片已全部完成加载
            index++;
            cache = [];
            flag = true;
            onFinish();
        }
    }
 
    //调整元素位置
    var fixLi = function (li) {
        var minLine, targetLine, j;
        //获取新元素的位置
        minLine = lineArr.min();//找到最短的一列的高度
        targetLine = 0;//确认最短列的数组下标
        for (j = 0; j < lineArr.length; j++) {
            if (minLine == lineArr[j]) {
                targetLine = j;
                break;
            }
        }
        //填入队尾
        li.style.top = lineArr[targetLine] + 'px';
        li.style.position = "absolute";
        li.style.left = targetLine * boxWidth + targetLine * marginLeft + 'px';
        lineArr[targetLine] += li.offsetHeight + marginTop;//修改数组的值
    }
 
    //处理AJAX返回的数据
    var processData = function (data, getSrc, getHtml) {
        if (data.length == 0) {
            if ($("#" + containerId).html == "") {
                $("#" + containerId).html("内容正在采集中……"); return false;
            }
        }
        else {
            var html = ""
            var src = "";
            for (i = 0; i < line; i++) {
                lineArrBf[i] = lineArr[i];
            }
            for (var i = 0; i < data.length; i++) {
                src = getSrc(data[i]);
                html = getHtml(index, data[i], src);
 
                //a:0表示图片未完成缓存
                cache.push({ "a": 0, "b": html, "c": src });
            }
            printFall();
        }
    }
 
    //滚动事件
    var myFunction = function () {
        if (flag) {
            var doc_height = $(document).height();
            //屏幕下遮挡的页面高度
            var hBelow = doc_height - $(this).scrollTop() - $(this).height();
            var perc = hBelow / doc_height;
 
            //触发加载数据的条件
            if (hBelow < 3000 || perc < 0.3) {
                flag = false;
                getData(index, processData);
            }
        }
    }
 
    return myFunction;
}

  

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
//调取瀑布流
$(function () {
    //加载数据时执行的操作
    var getData = function (index, processData) {
        //图片链接
        var getSrc = function (item) {
            return "/uploads/" + item.g_id + "/" + item.c_picurl1;
        }
        //li标签内的内容拼接
        var getHtml = function (index, item, src) {
            var html = "";
            html += "<a href=\"/uploads/" + item.g_id + "/" + item.c_picurl2 + "\" class=\"fancyBox\">";
            html += "<img src=\"" + src + "\">";
            html += "<h3 title='" + item.c_info_title + "'>" + getLength(item.c_info_title, 15) + "</h3>";
            html += "</a>";
            return html
        }
 
        var para = {};
        para["index"] = index;
        para["kind"] = parameter.k.k;
        para["action"] = "list";
 
        $.ajax({
            type: "post",
            url: "cl/getCase.ashx",
            data: para,
            dataType: "json",
            success: function (data) {
                processData(data.Rows, getSrc, getHtml);
            },
            error: function (msg) {
                //alert(msg);
            }
        });
    };
 
    //加载完成后执行的操作
    var onFinish = function () {
        $(".fancyBox").fancybox({
            type: 'image',
            openEffect: 'elastic',
            closeEffect: 'elastic',
            padding: 0,
            centerOnScroll: true,
            helpers: {
                title: {
                    type: 'float'
                }
            }
        });
    }
 
    var myfall = waterfall('coont', 3, 860, 274, 14, 20, getData, onFinish);
    $(window).bind("scroll", myfall);
    myfall();
});
 
 
function getLength(str, i) {
    var s = str.toString();
    if (s) {
        if (s.length > i) {
            return s.substring(0, i);
        } else {
            return s;
        }
    } else {
        return "";
    }
}

  

posted @   随心~  阅读(348)  评论(0编辑  收藏  举报
编辑推荐:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!

点击右上角即可分享
微信分享提示