js 实现飞瀑流式布局-JavaSript-爱易网页

js 实现飞瀑流式布局

日期：2014-05-16　浏览次数：20340 次

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 ar

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js 实现飞瀑流式布局

相关资料更多>

推荐阅读更多>