用js实现瀑布流的一种简单方法
现在说瀑布流式布局似乎有点晚了，但是每一项技术都是向着“精”和“简”的方向在不断发展，在发展到极致之前，需要一个相当漫长的过程，因此，从这个角度来说，当瀑布流被应用得越来越多的时候，反而更应该讨论它，讨论如何将它改善。。。
下面奉上一则用JS实现瀑布流的方法，望批评。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>瀑布流布局测试</title> <style> body { background-color: #eee; font-size: 84%; text-align: justify; } .column { display: inline-block; vertical-align: top; } .pic_a { display: block; padding: 5px; margin-bottom: 10px; border: 1px solid #ccc; background-color: #fff; text-decoration: none; } .pic_a img { display: block; margin: 0 auto 5px; border: 0; vertical-align: bottom; } .pic_a strong { color: #333; } </style> </head> <body> <div id="container"></div> <script> var waterFall = { container: document.getElementById("container"), columnNumber: 1, columnWidth: 210, // P_001.jpg ~ P_160.jpg rootImage: "test/", indexImage: 0, scrollTop: document.documentElement.scrollTop || document.body.scrollTop, detectLeft: 0, loadFinish: false, // 返回固定格式的图片名 getIndex: function() { var index = this.indexImage; if (index < 10) { index = "00" + index; } else if (index < 100) { index = "0" + index; } return index; }, // 是否滚动载入的检测 appendDetect: function() { var start = 0; for (start; start < this.columnNumber; start++) { var eleColumn = document.getElementById("waterFallColumn_" + start); if (eleColumn && !this.loadFinish) { if (eleColumn.offsetTop + eleColumn.clientHeight < this.scrollTop + (window.innerHeight || document.documentElement.clientHeight)) { this.append(eleColumn); } } } return this; }, // 滚动载入 append: function(column) { this.indexImage += 1; var html = '', index = this.getIndex(), imgUrl = this.rootImage + "P_" + index + ".jpg"; // 图片尺寸 var aEle = document.createElement("a"); aEle.href = "###"; aEle.className = "pic_a"; aEle.innerHTML = '<img src="'+ imgUrl +'" /><strong>'+ index +'</strong>'; column.appendChild(aEle); if (index >= 160) { //alert("图片加载光光了！"); this.loadFinish = true; } return this; }, // 页面加载初始创建 create: function() { this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth); var start = 0, htmlColumn = '', self = this; for (start; start < this.columnNumber; start+=1) { htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ start +'" class="column" style="width:'+ this.columnWidth +'px;">'+ function() { var html = '', i = 0; for (i=0; i<5; i+=1) { self.indexImage = start + self.columnNumber * i; var index = self.getIndex(); html = html + '<a href="###" class="pic_a"><img src="'+ self.rootImage + "P_" + index +'.jpg" /><strong>'+ index +'</strong></a>'; } return html; }() + '</span> '; } htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>'; this.container.innerHTML = htmlColumn; this.detectLeft = document.getElementById("waterFallDetect").offsetLeft; return this; }, refresh: function() { var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0; for (start; start < this.columnNumber; start+=1) { var arrColumn = document.getElementById("waterFallColumn_" + start).innerHTML.match(/<a(?:.|\n|\r|\s)*?a>/gi); if (arrColumn) { maxLength = Math.max(maxLength, arrColumn.length); // arrTemp是一个二维数组 arrTemp.push(arrColumn); } } // 需要重新排序 var lengthStart, arrStart; for (lengthStart = 0; lengthStart<maxLength; lengthStart++) { for (arrStart = 0; arrStart<this.columnNumber; arrStart++) { if (arrTemp[arrStart][lengthStart]) { arrHtml.push(arrTemp[arrStart][lengthStart]); } } } if (arrHtml && arrHtml.length !== 0) { // 新栏个数 this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth); // 计算每列的行数 // 向下取整 var line = Math.floor(arrHtml.length / this.columnNumber); // 重新组装HTML var newStart = 0, htmlColumn = '', self = this; for (newStart; newStart < this.columnNumber; newStart+=1) { htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ newStart +'" class="column" style="width:'+ this.columnWidth +'px;">'+ function() { var html = '', i = 0; for (i=0; i<line; i+=1) { html += arrHtml[newStart + self.columnNumber * i]; } // 是否补足余数 html = html + (arrHtml[newStart + self.columnNumber * line] || ''); return html; }() + '</span> '; } htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>'; this.container.innerHTML = htmlColumn; this.detectLeft = document.getElementById("waterFallDetect").offsetLeft; // 检测 this.appendDetect(); } return this; }, // 滚动加载 scroll: function() { var self = this; window.onscroll = function() { // 为提高性能，滚动前后距离大于100像素再处理 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) { self.scrollTop = scrollTop; self.appendDetect(); } }; return this; }, // 浏览器窗口大小变换 resize: function() { var self = this; window.onresize = function() { var eleDetect = document.getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft; if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) { // 检测标签偏移异常，认为布局要改变 self.refresh(); } }; return this; }, init: function() { if (this.container) { this.create().scroll().resize(); } } }; waterFall.init(); </script> </body> </html>
来源：http://blog.csdn.net/buyingfei8888/article/details/14051805
