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 '" / alt="Example sharing of a simple method to implement waterfall flow in js_javascript skills" ><strong>' index '';<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="max-width:90%" 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" / alt="Example sharing of a simple method to implement waterfall flow in js_javascript skills" ><strong>' index '';<BR>                    }<BR>                    return html;    <BR>                }() <BR>            ' ';    <BR>        }<BR>        htmlColumn = '<span id="waterFallDetect" class="column" style="max-width:90%" this.columnWidth 'px;">';<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>                ' ';    <BR>            }<BR>            htmlColumn = '<span id="waterFallDetect" class="column" style="width:' this.columnWidth 'px;">';<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>