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 arrColumn = document.getElementById("waterFallColumn_" + start).innerHTML.match(/<a(?:.|
|\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>

좋은 웹페이지 즐겨찾기