js实现瀑布流的一种简单方法实例分享
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着 "精" 和 "简" 的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它,讨论如何将它改善
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面奉上一则用 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>
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 = ''+ index +''; 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 + ''+ function() { var html = '', i = 0; for (i=0; i<5; i+=1) { self.indexImage = start + self.columnNumber * i; var index = self.getIndex(); html = html + ''; } return html; }() + ' '; } htmlColumn += ''; 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(//gi); if (arrColumn) { maxLength = Math.max(maxLength, arrColumn.length); // arrTemp 是一个二维数组 arrTemp.push(arrColumn); } } // 需要重新排序 var lengthStart, arrStart; for (lengthStart = 0; lengthStart for (arrStart = 0; 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 + ''+ function() { var html = '', i = 0; for (i=0; i html += arrHtml[newStart + self.columnNumber * i]; } // 是否补足余数 html = html + (arrHtml[newStart + self.columnNumber * line] || ''); return html; }() + ' '; } htmlColumn += ''; 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();
来源: