瀑布流布局js
<!DOCTYPE html><html><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: "http://cued.xunlei.com/demos/publ/img/", 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>
相关文章
- 1. js 瀑布流布局
- 2. JS 瀑布流布局
- 3. JS瀑布流布局
- 4. Masonry JS瀑布流布局
- 5. 瀑布流布局
- 6. JS瀑布流布局模式(1)
- 7. js实现瀑布流布局
- 8. JS瀑布流布局模式(2)
- 9. js瀑布流
- 10. 瀑布流布局浅析
- 更多相关文章...
- • ASP.NET Web Pages - 页面布局 - ASP.NET 教程
- • ASP.NET MVC - 样式和布局 - ASP.NET 教程
- • JDK13 GA发布：5大特性解读
- • 再有人问你分布式事务，把这篇扔给他
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. js 瀑布流布局
- 2. JS 瀑布流布局
- 3. JS瀑布流布局
- 4. Masonry JS瀑布流布局
- 5. 瀑布流布局
- 6. JS瀑布流布局模式(1)
- 7. js实现瀑布流布局
- 8. JS瀑布流布局模式(2)
- 9. js瀑布流
- 10. 瀑布流布局浅析