在看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));//随机获取数据,并追加到最后
}
}
}