javascript-实现简单瀑布流
浏览数：31 /
时间：2015年06月08日
直接上代码：
<style>
*{
margin:0;
padding:0;
}
.waterfall_item{
border:solid 3px #ccc;
box-shadow:1px 1px 3px #eee;
border-radius:8px;
font:normal 12px/22px ‘Microsoft yahei‘;
text-align: center;
padding: 20px 0;
overflow: hidden;
}
</style>
<script>
/**
瀑布流
分析：
瀑布流主要解决各个列的各元素的位置，以及各列的高度问题
*/
/**
瀑布流
分析：
瀑布流主要解决各个列的各元素的位置，以及各列的高度问题
确定一行有几列，每个元素之间的间隔大小。
获取各元素的高度，添加到面板，并确定每列的高度
属性：
panel//画板
items//要加载的项目
colNum//列数
col=[]//列数组
colLeft// 左间距
colTop// 上间距
方法:
init//初始化
refresh//刷新
setColNum//设置列数
setColLeft//设置左间距
setColTop//设置上间距
paint//添加到外框
refreshPanel//更新外部画板
*/
function getStyle(o,name){
if(document.defaultView&&document.defaultView.getComputedStyle)
return document.defaultView.getComputedStyle(o,null)[name];
else
return o.currentStyle[name];
}
function waterfall(opts){
this.init(opts);
}
waterfall.prototype={
constructor:waterfall,
init:function(opts){
this.panel=opts.panel||document.body;//画板
this.items=opts.items||[];//要加载的项目
this.colNum=opts.colNum||3;//列数
this.colLeft=opts.colLeft||5;//左间距
this.colTop=opts.colTop||5;// 上间距
this._updated=false;
this.col=[];
this.initCol();
this.newItems=this.items;
this.draw(this.newItems);
},
initCol:function(){
//初始化列数组
for(var i=0,len=this.colNum;i<len;i++){
this.col[i]={
height:0,//高度
itemNum:0,//项目数
idx:i,
count:0
}
}
},
refresh:function(type){
var items;
if(this._updated){
if(type!==‘append‘){
this.initCol();
this.panel.innerHTML=‘‘;
items=this.items;
}else{
items=this.newItems;
}
this.draw(items);
}
},
_setUpdate:function(updated){
if(this._updated!=updated){
this._updated=updated;
}
},
setColNum:function(num){
if(num==this.colNum)return;
this._setUpdate(true);
this.colNum=num;
},
setColLeft:function(leftSpan){
this._setUpdate(true);
this.colLeft=leftSpan;
},
setColTop:function(topSpan){
this._setUpdate(true);
this.colLeft=leftSpan;
},
addItems:function(items){
this._setUpdate(true);
this.items=this.items.concat(items);
this.newItems=items;
},
draw:function(items){
var that=this,
i=0,
p=this.panel,
len=items.length;
for(;i<len;i++){
var r=Math.floor(i/this.colNum);
var w=parseInt(getStyle(p,‘width‘))/this.colNum-this.colLeft;
var curCol=this.getMinHeightCol();
var c=curCol.idx;
var t=curCol.height+this.colTop;
var l=c*(w+this.colLeft)+this.colLeft;
var oitem=this.createItem(w,l,t,items[i]);
p.appendChild(oitem);
var itemH=oitem.offsetHeight;
curCol.height=curCol.height+itemH+this.colTop;
curCol.count++;
p.style.height=curCol.height+‘px‘;
}
},
createItem:function(w,l,t,html){
var oitem=document.createElement(‘div‘);
oitem.innerHTML=html;
oitem=oitem.firstChild;
oitem.style.position=‘absolute‘;
oitem.style.width=w+‘px‘;
oitem.style.left=l+‘px‘;
oitem.style.top=t+‘px‘;
return oitem;
},
getMinHeightCol:function(){
var idx=0,minner=this.col[idx].height;
for(var i=0,len=this.colNum;i<len;i++){
if(minner>this.col[i].height){
minner=this.col[i].height;
idx=i;
}
}
return this.col[idx];
}
}
</script>
<div style="margin:0 auto">列：<input type="text" value=‘3‘ id="col_num" /><button id="refresh">刷新</button></div>
<div id="response_flow" class="response_flow" style="width:1000px;position:relative;">
</div>
<script>
//测试用例
var items=[
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘100‘ style=‘height:100px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘>asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘200‘ style=‘height:200px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘100‘ style=‘height:100px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘>asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘200‘ style=‘height:200px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘100‘ style=‘height:100px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘>asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘200‘ style=‘height:200px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘100‘ style=‘height:100px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘>asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘200‘ style=‘height:200px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘100‘ style=‘height:100px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘>asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘200‘ style=‘height:200px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘100‘ style=‘height:100px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘>asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘200‘ style=‘height:200px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘100‘ style=‘height:100px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘>asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘200‘ style=‘height:200px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘100‘ style=‘height:100px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘>asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘><img src=‘1.jpg‘ height=‘200‘ style=‘height:200px;‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>"
]
var colNum;
var refreshBtn=document.getElementById(‘refresh‘);
var panel=document.getElementById(‘response_flow‘);
var flow=new waterfall({
panel:panel,
items:items,
colLeft:20,
topLeft:20
})
//追加
var newItems=[
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘200‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘100‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘>asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘><img src=‘http://sandbox.runjs.cn/uploads/rs/392/w5zrkmek/1.jpg‘ height=‘200‘ /><br />asdfasdfasdf</div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>",
"<div class=‘waterfall_item‘>asdfasdfasdf<br />asdfasdfasdf<br /></div>"
];
refreshBtn.onclick=function(){
colNum=document.getElementById(‘col_num‘).value;
flow.setColNum(colNum);
flow.refresh();
}
var toop=200;
var loadNum=1;
var maxNum=5;
var originTop=document.body.scrollHeight-document.documentElement.clientHeight;
window.onscroll=function(){
var to=document.body.scrollTop;
if(loadNum>maxNum)return;
if(to>loadNum*toop){
loadNum++;
flow.addItems(newItems)
flow.refresh(‘append‘)
}
}
window.onresize=function(){
flow._setUpdate(true);
flow.refresh();
}
</script>
效果见：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
