最近一直在学习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>