瀑布流布局测试
<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>
