瀑布流佈局js

時間 2019-11-30
原文原文鏈接
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>瀑布流佈局測試</title>    <style>        body {            background-color: #eee;            font-size: 84%;            text-align: justify;        }        .column {            display: inline-block;            vertical-align: top;        }        .pic_a {            display: block;            padding: 5px;            margin-bottom: 10px;            border: 1px solid #ccc;            background-color: #fff;            text-decoration: none;        }        .pic_a img {            display: block;            margin: 0 auto 5px;            border: 0;            vertical-align: bottom;        }        .pic_a strong {            color: #333;        }    </style></head><body><div id="container"></div><script>    var waterFall = {        container: document.getElementById("container"),        columnNumber: 1,        columnWidth: 210,        // P_001.jpg ~ P_160.jpg        rootImage: "http://cued.xunlei.com/demos/publ/img/",        indexImage: 0,        scrollTop: document.documentElement.scrollTop || document.body.scrollTop,        detectLeft: 0,        loadFinish: false,        // 返回固定格式的圖片名        getIndex: function() {            var index = this.indexImage;            if (index < 10) {                index = "00" + index;            } else if (index < 100) {                index = "0" + index;            }            return index;        },        // 是否滾動載入的檢測        appendDetect: function() {            var start = 0;            for (start; start < this.columnNumber; start++) {                var eleColumn = document.getElementById("waterFallColumn_" + start);                if (eleColumn && !this.loadFinish) {                    if (eleColumn.offsetTop + eleColumn.clientHeight < this.scrollTop + (window.innerHeight || document.documentElement.clientHeight)) {                        this.append(eleColumn);                    }                }            }            return this;        },        // 滾動載入        append: function(column) {            this.indexImage += 1;            var html = '', index = this.getIndex(), imgUrl = this.rootImage + "P_" + index + ".jpg";            // 圖片尺寸            var aEle = document.createElement("a");            aEle.href = "###";            aEle.className = "pic_a";            aEle.innerHTML = '<img src="'+ imgUrl +'" /><strong>'+ index +'</strong>';            column.appendChild(aEle);            if (index >= 160) {                //alert("圖片加載光光了！");                this.loadFinish = true;            }            return this;        },        // 頁面加載初始建立        create: function() {            this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);            var start = 0, htmlColumn = '', self = this;            for (start; start < this.columnNumber; start+=1) {                htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ start +'" class="column" style="width:'+ this.columnWidth +'px;">'+                    function() {                        var html = '', i = 0;                        for (i=0; i<5; i+=1) {                            self.indexImage = start + self.columnNumber * i;                            var index = self.getIndex();                            html = html + '<a href="###" class="pic_a"><img src="'+ self.rootImage + "P_" + index +'.jpg" /><strong>'+ index +'</strong></a>';                        }                        return html;                    }() +                    '</span> ';            }            htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>';            this.container.innerHTML = htmlColumn;            this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;            return this;        },        refresh: function() {            var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;            for (start; start < this.columnNumber; start+=1) {                var arrColumn = document.getElementById("waterFallColumn_" + start).innerHTML.match(/<a(?:.|\n|\r|\s)*?a>/gi);                if (arrColumn) {                    maxLength = Math.max(maxLength, arrColumn.length);                    // arrTemp是一個二維數組                    arrTemp.push(arrColumn);                }            }            // 須要從新排序            var lengthStart, arrStart;            for (lengthStart = 0; lengthStart<maxLength; lengthStart++) {                for (arrStart = 0; arrStart<this.columnNumber; arrStart++) {                    if (arrTemp[arrStart][lengthStart]) {                        arrHtml.push(arrTemp[arrStart][lengthStart]);                    }                }            }            if (arrHtml && arrHtml.length !== 0) {                // 新欄個數                this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);                // 計算每列的行數                // 向下取整                var line = Math.floor(arrHtml.length / this.columnNumber);                // 從新組裝HTML                var newStart = 0, htmlColumn = '', self = this;                for (newStart; newStart < this.columnNumber; newStart+=1) {                    htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ newStart +'" class="column" style="width:'+ this.columnWidth +'px;">'+                        function() {                            var html = '', i = 0;                            for (i=0; i<line; i+=1) {                                html += arrHtml[newStart + self.columnNumber * i];                            }                            // 是否補足餘數                            html = html + (arrHtml[newStart + self.columnNumber * line] || '');                            return html;                        }() +                        '</span> ';                }                htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>';                this.container.innerHTML = htmlColumn;                this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;                // 檢測                this.appendDetect();            }            return this;        },        // 滾動加載        scroll: function() {            var self = this;            window.onscroll = function() {                // 爲提升性能，滾動先後距離大於100像素再處理                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;                if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) {                    self.scrollTop = scrollTop;                    self.appendDetect();                }            };            return this;        },        // 瀏覽器窗口大小變換        resize: function() {            var self = this;            window.onresize = function() {                var eleDetect = document.getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;                if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) {                    // 檢測標籤偏移異常，認爲佈局要改變                    self.refresh();                }            };            return this;        },        init: function() {            if (this.container) {                this.create().scroll().resize();            }        }    };    waterFall.init();</script></body></html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。