日期:2014-05-16 浏览次数:20339 次
瀑布流式布局 看来是越来越流行了,项目也让实现一个,就挑战了下。
所谓瀑布流式布局也就是感觉网页加载如同瀑布,随鼠标下拉页面在不停加载
下面代码能实现宽度自适应
<!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 ar