原生JS写瀑布流

最新推荐文章于 2022-08-18 16:53:13 发布

yangwenhui11

最新推荐文章于 2022-08-18 16:53:13 发布

阅读量253

点赞数 1

分类专栏：原生js案例文章标签： javascript

本文链接：https://blog.csdn.net/yangwenhui11/article/details/60761765

版权

原生js案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>瀑布流</title>
<style type="text/css">
*{margin:0;padding:0;}
#container{
width:100%;
height:auto;
position:relative;
border:5px solid #000;
margin:0 auto;
}
#container div{
width:150px;
height:auto;
position:absolute;
top:5px;
left:5px;
overflow:hidden;
}
#container div img{
width:150px;
height:auto;
float: left;
border:none;
}
#container div span{
height:30px;
line-height:30px;
font-size:12px;
text-align:center;
font-family:"微软雅黑";
width:150px;
float: left;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
function water(){
var _me=this;
this.pass=0;//作用：控制onscroll方法多次执行的bug
this.initData=function(){
this.container=document.getElementById("container");
this.columns=null;
this.timer=0;
this._start=1;
this._end=this._start+50+1;
this.bch=document.documentElement.clientHeight||document.body.clientHeight;
}
this.minHeight=function(){//找出最小高度
var min=this.columns[0];
var n=0;
for(var i=0;i<this.columns.length;i++){
if(min>this.columns[i]){
min=this.columns[i];//此时已经好处最小高度的那张图片；
n=i;//将最小高度图片的下标赋值给n；
}
}
return n;
}
this.maxHeight=function(){
var _max=this.columns[0];
for(var i=0;i<this.columns.length;i++){
if(_max<this.columns[i]){
_max=this.columns[i];
}
}
return _max;
}
this.waterfall=function(flag){
var index=-1;
for(var i=flag?flag:this._start-1;i<this.container.children.length;i++){
//如何知道哪一列的高度是最小的？
index=this.minHeight();//找出最小高度
this.container.children[i].style.left=index*155+5+"px";
this.container.children[i].style.top=this.columns[index]+5+"px";
this.columns[index]+=this.container.children[i].offsetHeight+5;
}
this.container.style.height=this.maxHeight()+5+"px";
this.pass=1;
}
this.isComplete=function(){
window.clearTimeout(_me.timer);
var _complete=true;
for(var i=_me._start-1;i<_me.container.children.length;i++){
if(!_me.container.children[i].children[0].complete){
_complete=false;
break;
}
}
if(_complete){
_me.waterfall();
}else{
_me.timer=window.setTimeout(_me.isComplete,60);
}
}
this.initArray=function(){//初始化数组
for(var i=0;i<this.columns.length;i++){
this.columns[i]=0;
}
}
this.resetContainer=function(){
this.dcw=document.documentElement.clientWidth||document.body.clientWidth;
var count=Math.floor((this.dcw-5)/155);
this.container.style.width=count*155+5+"px";
this.columns=new Array(count);//新建数组，存放每一行的列数也就是每一行的图片；
this.initArray();
}
this.createComponent=function(){
for(var i=this._start;i<=this._end&& i<=106;i++){
this.div=document.createElement("div");
this.img=document.createElement("img");
this.img.src="images/"+i+".jpg"
this.span=document.createElement("span");
this.span.innerHTML="用心学多练习";
this.container.appendChild(this.div);
this.div.appendChild(this.img);
this.div.appendChild(this.span);
}
}
}
var _water=new water();
_water.initData();
_water.createComponent(_water._start,_water._end);//创建container下的div；
_water.resetContainer();//计算每一行的列数；也就是放几张图片;
//_water.waterfall();//由于图片不能在一瞬间完成，所以需要判断一下图片是否加载完成；所以有isComplete
_water.isComplete();
window.οnscrοll=function(){
var _scol=document.documentElement.scrollTop||document.body.scrollTop;
if(_scol+_water.bch>=_water.columns[_water.minHeight()] && _water.pass==1){
_water.pass=0;
_water._start=_water._end+1;
_water._end=_water._end+50;
_water.createComponent(_water._start,_water._end);
_water.isComplete();
}
}
window.οnresize=function(){
if(_water.pass){
_water.resetContainer();
_water.waterfall(1);//作用：计算每一个小的div所应该摆放位置。
}
}
}
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>