js 实现瀑布流式布局

来源：互联网发布：郑州seo薪资编辑：程序博客网时间：2024/05/22 11:51
瀑布流式布局看来是越来越流行了，项目也让实现一个，就挑战了下。
所谓瀑布流式布局也就是感觉网页加载如同瀑布，随鼠标下拉页面在不停加载
下面代码能实现宽度自适应
<!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.jpgrootImage: "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);// 重新组装HTMLvar 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>