js實作瀑布流的簡單方法實例分享_javascript技巧

下面奉上一則用JS實現瀑布流的方法，望批評。

複製程式碼 程式碼如下:

<script><BR>var waterFall = {<BR>    container: document.getElementById("container"),<BR>    columnNumber: 1,<🠎> jpg ~ P_160.jpg<BR>    rootImage: "test/",<BR>    indexImage: 0,<BR><BR>    scrollTop: document.documentElement. 0,<br><br>    loadFinish: false,<BR><br>    // 回傳固定格式的圖片名稱<br>        if (index < 10 ) {<br>            index = "00" index;    <br>        }   <BR>        }<BR>        return index;<BR>    },<BR><BR>    // 是否滾動載入的偵測<BR>    appendDetect: function() {<BR>        var start = 0;<BR>       🎜>            var eleColumn = document.getElementById("waterFallColumn_" start);<BR>            if (eleColumn && !this.loadFinish) {<. Top eleColumn.clientHeight < this.scrollTop (window.innerHeight || document.documentElement. cliclientHeight)) {<br>                    this.append(eleColumn);<br>          }            <BR>        }<BR><BR>      入<BR>    append: function(column) {<BR>        this.indexImage = 1;<BR>      ;<BR><BR>        // 圖片尺寸<BR>        var aEle = document.createElement("a");<.  aEle.className = "pic_a"; <BR>        aEle.innerHTML = '<img src="' imgUrl '" / alt="js實作瀑布流的簡單方法實例分享_javascript技巧" ><strong>' index '';<br>     index >= 160) {<br>            //alert("圖片載入光了！");<BR>            this.loadFinish = true;<BR>        }<br><>       }<br><   // 頁面載入初始建立<BR>    create: function() {<br>        this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);<br><BR>       for (start; start <this.columnNumber; start =1) {<BR>          >               function() {<br>                        for (i=0; i<5; i =1) {<br>                    <BR>                        var index = self.getIndex();<  html '<a href="###" class="pic_a"><img src="' self.rootImage "P_ "索引'.jpg ”/ alt="js實作瀑布流的簡單方法實例分享_javascript技巧" ><strong>' 索引'';<BR>                   }<BR>                 }() <BR>           ' ';    < 🎜>        htmlColumn = '<span id="waterFallDetect" class="column" style="max-width:90%" this.columnWidth 'px;"> 🠎. ; <BR><BR>        this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;<BR>    tion() {<BR>        var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;<BR>        for (start; start < this.columnNumber; start =1) {<🠎> waterFallColumn_" start).innerHTML.match(/<a(?:.|n|r|s)*?a>/gi);<BR>           .max( maxLength, arrColumn.length);<BR>                // arrTemp 為二維陣列<BR>           }<BR>        }<BR><br>       // 必須重新排序<br> var lengthStart , arrStart;<br>        for (lengthStart = 0;長度開始<長度長度；lengthStart ) {<br>                   if (arrTemp[arrStart][lengthStart ]) {<BR>                    arrHtml.push(arr溫度[arrStart][lengthStart]) ;    <BR>                }<br>            }    <gantml && arrhtml.length！ == 0）<gantml && arrhtml && arhtml.length！ / 計算每列的行數<br>            // 迭代中取值<br>            var line = Math.floor(arrH        var line = Math.floor(arrH             // 重新建構HTML<BR>            var newStart = 0, htmlColumn = '', self = this;<BR>            for (newStart; newStart <this.columnNumber; newStart =1) {<>   pan id="waterFallColumn_'newStart'" class= "column" style="width:' this.columnWidth 'px;">' <BR>                    var html = '', i = 0;<br>                        for (i=0; i< //是否補足餘數<br>                        html = html(arrHtml[new               回 html;    <BR>                    }() <BR>           ';    <br>            }<br>            htmlColumn = '<span id="waterFallDetect" class="column" this="wid:<span id="waterFallDetect" class="column" this="wid:clumn" s><clumn" s><clumn" s><clumn" s"<clumn" s"<clumn" s"><clumn" s"<clumn" s"><clumn" s><clumn" s"><clumn" s><clumn" s><clumn" s><clumn" s><clumn" s><clumn" s><clumn" s><clumn" s><clumn"; >            這個。 container.innerHTML = htmlColumn;<BR><BR>            this.detectLeft = document.getElementById("waterF. 🎜>            this.appendDetect ();<BR>       }< ？ {<BR>            // 為提高穩定性，且滾動行程距離大於100像素再處理<BR>            var scrollTop = docum         var scrollTop = docum”C. document.body.scrollTop;<BR>            if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) {< c scrollTop;<BR>                self.appendDetect();    <BR>            }<BR><BR>        };<br>      ,<br><br>    // 瀏覽器視窗大小轉換<BR>    resize: function() {<BR>        var self = this<🠎.          var eleDetect = document. getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;<BR>                      // 偵測標籤偏移異常，並認為佈局要改變<BR>                               return this;<BR>    },<BR>    init: function() {<BR>        if (this.container) {<BR>            this.create().scroll().resize();    <BR>        }<BR>>  ></身體><BR></script>