通过JS实现固定列宽瀑布流

最近一直在学习JS，今天特意学了一下瀑布流的使用，记录下来，以便以后使用。

瀑布流包含2种：

　　1、固定列宽瀑布流

　　2、非固定列宽瀑布流

下面简单的实现一个固定列宽瀑布流：

首先HTML代码：《》

<div class="main">
			<div class="col">
				<img src="img/1.jpg" alt=""/><p>[1.jpg]</p>
			</div>
			
			<div class="col">
				<img src="img/2.jpg" alt=""/><p>[2.jpg]</p>
			</div>
			
			<div class="col">
				<img src="img/3.jpg" alt=""/><p>[3.jpg]</p>
			</div>
			
			<div class="col">
				<img src="img/4.jpg" alt=""/><p>[4.jpg]</p>
			</div>
			
		</div>

　　css代码很简单，就不贴了。

接下来是JS代码

eg.getDataList = function(min,max){
	
	//模拟构造数据，实际上这些数据应该由后端提供
	var lst = [],n=8;//保存数据
	for(var i=0;i<n;i++){
		var k = min + parseInt(Math.random()*(max - min ));//随机指定范围的数
		lst.push("img/"+k+".jpg");
	}
	return lst;//返回数组
	
};
eg.cols = eg.getElementsByClassName("col");
eg.colh =[0,0,0,0];//存取每列的高度
//计算四列的高度
eg.getColMin = function(){
	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){
	alert("add");
	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(){
	alert("scroll");
	window.onscroll = function(){
		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));//随机获取数据，并追加到最后
		}
	};
};

　　然后需要在html中事先调用上边的几个JS函数，如下

<script>
			eg.getColMin();
			var dl = eg.getDataList(5,35);//初始化一些数据
			eg.add(dl);
			eg.scroll();//启动滚动条监听
</script>