固定列宽的简单瀑布流实现

在看JavaScript实战中看到瀑布流，决定记录下代码，以备不时之需。
首先写一个HTML代码

<!DOCTYPE html>
<html>
 <head>
  <title>瀑布流</title>
  <link rel="stylesheet" href="eg5.css" />
 </head>
 <body>
	<div class="main">
		<div class="col"><img src="1.jpg" alt="" /><p>[1.jpg]</p></div>
		<div class="col"><img src="2.jpg" alt="" /><p>[2.jpg]</p></div>
		<div class="col"><img src="3.jpg" alt="" /><p>[3.jpg]</p></div>
		<div class="col"><img src="4.jpg" alt="" /><p>[4.jpg]</p></div>
	</div>
	<script src="base.js"></script>
	<script src="eg5.js"></script>
	<script>
	eg.getColMin();//计算第一批数据的高度
var dl = eg.getDataList(5,35);//初始化一些数据
	eg.add(dl);//补充剩下的数据
	eg.scroll();//启动滚动条监听
	</script>
 </body>
</html>

接着就是JavaScript代码了

//base.js
(function(self){
	if(window.eg === undefined){
		window.eg = self(window,document);
	}
})(function(window,document){
	var eg = {};
		eg.$ = function(id){
			return document.getElementById(id);
		};
		eg.getElementsByClassName = function(className, element) {
			if(document.getElementsByClassName){
				return (element || document).getElementsByClassName(className)
			}
			var children = (element || document).getElementsByTagName('*');
			var elements = [];
			for (var i = 0; i < children.length; i++) {
				var child = children[i];
				var classNames = child.className.split(' ');
				for (var j = 0; j < classNames.length; j++) {
					if (classNames[j] == className) {
						elements.push(child);
						break;
					}
				}
			}
			return elements;
		};
		eg.addListener = function(target,type,handler){
			if(target.addEventListener){
				target.addEventListener(type,handler,false);
			}else if(target.attachEvent){
				target.attachEvent("on"+type,handler);
			}else{
				target["on"+type]=handler;
			}
		};
		eg.getTop = function(El){
             var top = 0;
             do{
                 top += El.offsetTop;//
             }while((El = El.offsetParent).nodeName != 'BODY');//
             return top;
         };
	return eg;
});


//eg5.js
eg.getDataList = function(min,max){//模拟构造数据，实际上这些数据由后端提供
	var lst = [],n=8;			//保存数据
	for(var i=0;i<n;i++){	//每次模拟n条
		var k = min + parseInt(Math.random()*(max-min));//随机指定范围的数
		lst.push(k+".jpg");	//拼接成字符串
	}
	return lst;				//返回数组
};
eg.cols = eg.getElementsByClassName("col");//把目标对象缓存起来
eg.colh = [0,0,0,0];						//存取每列的高度
eg.getColMin = function(){	//计算4列高度
	var min = 0,m = {};
	for(var i=0;i<4;i++){
		min = parseInt(eg.cols[i].offsetHeight);
		eg.colh[i] = min;
		m[min] = i;
	}
	return eg.cols[m[Math.min.apply(Array,eg.colh)]||0];//返回最小高度的对象
}
eg.add = function(dl){//追加数据的方法
	for(var i in dl){
		var newDiv = document.createElement("div")
		var newImg = document.createElement("img");
			newImg.src = dl[i];
			newDiv.appendChild(newImg);
			newDiv.innerHTML += '<p>['+dl[i]+']</p>';
			eg.getColMin().appendChild(newDiv);//追加到最小高度列里
	}
};
eg.scroll = function(){//滚动条事件处理
	window.onscroll = function(){//onscroll,onload,onresize只能这样添加
		var doc = document;
		var top = doc.documentElement.scrollTop || doc.body.scrollTop;		//滚动条到顶部的高度
		var winH = doc.documentElement.clientHeight||doc.body.clientHeight;	//可视窗口的高度
		if(Math.min.apply(Array,eg.colh) < top+winH){//如果最小高度小于可视区域，就补充
				eg.add(eg.getDataList(1,35));//随机获取数据，并追加到最后
		}
	}
}

固定列宽的简单瀑布流实现

猜你喜欢