Example sharing of a simple method to implement waterfall flow in js_javascript skills

The following is a method of implementing waterfall flow using JS. I hope you will criticize.

Copy code The code is as follows:

<script><br>var waterFall = {<br> container: document.getElementById("container"),<br> columnNumber: 1,<br> columnWidth: 210,<br> // P_001. jpg ~ P_160.jpg<br> rootImage: "test/",<br> indexImage: 0,<br><br> scrollTop: document.documentElement.scrollTop || document.body.scrollTop,<br> detectLeft: 0, <br><br> loadFinish: false,<br><br> // Return the fixed format image name<br> getIndex: function() {<br> var index = this.indexImage;<br> if (index &lt ; 10) {<br>                index = "00" index;                                                                                                                                   🎜> },<br><br> // Detection of scrolling loading <br> appendDetect: function() {<br> var start = 0;<br> for (start; start < this.columnNumber; start ) { <br> var eleColumn = document.getElementById("waterFallColumn_" start);<br> if (eleColumn && !this.loadFinish) {<BR> eleColumn.offsetTop eleColumn.clientHeight & lt; this.scrollTop (window.innerHeight | | document.documentElement.clientHeight)) {<BR> this.append(eleColumn);<BR> }<BR> } }<BR> }<BR><BR> return this;<BR> },<BR><BR> // Scroll loading <br> append: function(column) {<br> this.indexImage = 1;<BR> var html = '', index = this.getIndex(), imgUrl = this.rootImage "P_" index ".jpg";<br><br> // Image size<BR> var aEle = document.createElement("a");<BR> aEle.href = "###";<BR> aEle.className = "pic_a";<br> aEle.innerHTML = '<img src="' imgUrl '" /><strong>' index '</strong>';<br> column.appendChild(aEle); <br><br> if (index >= 160) {<br> //alert("The picture is loading!");<br>            this.loadFinish = true;<br>        }<br><br>        return this;<br>    },<br><br>    // 页面加载初始创建<br>    create: function() {<br>        this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);<br><br>        var start = 0, htmlColumn = '', self = this;<br>        for (start; start < this.columnNumber; start =1) {<BR>            htmlColumn = htmlColumn '<span id="waterFallColumn_' start '" class="column" style="width:' this.columnWidth 'px;">' <br>                function() {<br>                    var html = '', i = 0;<br>                    for (i=0; i<5; i =1) {<BR>                        self.indexImage = start self.columnNumber * i;<BR>                        var index = self.getIndex();<BR>                        html = html '<a href="###" class="pic_a"><img src="' self.rootImage "P_" index '.jpg" /><strong>' index '</strong></a>';<br>                    }<br>                    return html;    <br>                }() <br>            '</span> ';    <br>        }<br>        htmlColumn = '<span id="waterFallDetect" class="column" style="width:' this.columnWidth 'px;"></span>';<br><br>        this.container.innerHTML = htmlColumn;<br><br>        this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;<br>        return this;<br>    },<br><br>    refresh: function() {<br>        var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;<br>        for (start; start < this.columnNumber; start =1) {<BR>            var arrColumn = document.getElementById("waterFallColumn_" start).innerHTML.match(/<a(?:.|n|r|s)*?a>/gi);<br>            if (arrColumn) {<br>                maxLength = Math.max(maxLength, arrColumn.length);<br>                // arrTemp是一个二维数组<br>                arrTemp.push(arrColumn);<br>            }<br>        }<br><br>        // 需要重新排序<br>        var lengthStart, arrStart;<br>        for (lengthStart = 0; lengthStart<maxLength; lengthStart ) {<BR>            for (arrStart = 0; arrStart<this.columnNumber; arrStart ) {<BR>                if (arrTemp[arrStart][lengthStart]) {<BR>                    arrHtml.push(arrTemp[arrStart][lengthStart]);    <BR>                }<BR>            }    <BR>        }<br><br>        <BR>        if (arrHtml && arrHtml.length !== 0) {<BR>            // 新栏个数        <BR>            this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);<br><br>            // 计算每列的行数<BR>            // 向下取整<BR>            var line = Math.floor(arrHtml.length / this.columnNumber);<br><br>            // 重新组装HTML<BR>            var newStart = 0, htmlColumn = '', self = this;<BR>            for (newStart; newStart < this.columnNumber; newStart =1) {<BR>                htmlColumn = htmlColumn '<span id="waterFallColumn_' newStart '" class="column" style="width:' this.columnWidth 'px;">' <br>                    function() {<br>                        var html = '', i = 0;<br>                        for (i=0; i<line; i =1) {<br>                            html = arrHtml[newStart self.columnNumber * i];<br>                        }<br>                        // 是否补足余数<br>                        html = html (arrHtml[newStart self.columnNumber * line] || '');<br><br>                        return html;    <br>                    }() <br>                '</span> ';    <br>            }<br>            htmlColumn = '<span id="waterFallDetect" class="column" style="width:' this.columnWidth 'px;"></span>';<br><br>            this.container.innerHTML = htmlColumn;<br><br>            this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;<br><br>            // 检测<br>            this.appendDetect();<br>        }<br>        return this;<br>    },<br><br>    // 滚动加载<br>    scroll: function() {<br>        var self = this;<br>        window.onscroll = function() {<br>            // 为提高性能，滚动前后距离大于100像素再处理<br>            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;<br>            if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) {<br>                self.scrollTop = scrollTop;<br>                self.appendDetect();    <br>            }<br><br>        };<br>        return this;<br>    },<br><br> // Browser window size change<br> resize: function() {<br> var self = this;<br> window.onresize = function() {<br> var eleDetect = document. getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;<br> if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) {<br> // Detect label offset abnormality, consider layout To change <br>   if (this.container) { <br> this.create().scroll().resize(); <br> }<br> }<br>};<br>waterFall.init();<br></script>