瀑布流布局测试
<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> // 返回固定格式的图片名<BR> getIndex: function() {<BR> var index = this.indexImage;<BR> if (index < 10) {<BR> index = "00" + index; <BR> } else if (index < 100) {<BR> index = "0" + index; <BR> }<BR> return index;<BR> },<br><br> // 是否滚动载入的检测<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> if (eleColumn.offsetTop + eleColumn.clientHeight < this.scrollTop + (window.innerHeight || document.documentElement.clientHeight)) {<BR> this.append(eleColumn);<BR> }<BR> } <BR> }<br><br> return this;<BR> },<br><br> // 滚动载入<BR> append: function(column) {<BR> this.indexImage += 1;<BR> var html = '', index = this.getIndex(), imgUrl = this.rootImage + "P_" + index + ".jpg";<br><br> // 图片尺寸<BR> var aEle = document.createElement("a");<BR> aEle.href = "###";<BR> aEle.className = "pic_a";<BR> aEle.innerHTML = '<img src="'+ imgUrl +'" / alt="js实现瀑布流的一种简单方法实例分享_javascript技巧" ><strong>'+ index +'';<BR> column.appendChild(aEle);<br><br> if (index >= 160) {<BR> //alert("图片加载光光了！");<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="js实现瀑布流的一种简单方法实例分享_javascript技巧" ><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> // 浏览器窗口大小变换<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> // 检测标签偏移异常，认为布局要改变<BR> self.refresh(); <BR> }<BR> };<BR> return this;<BR> },<BR> init: function() {<BR> if (this.container) {<BR> this.create().scroll().resize(); <BR> }<BR> }<BR>};<BR>waterFall.init();<BR></script>
