好资源导航 » 文章资讯 » 基于JavaScript实现无限加载瀑布流

基于JavaScript实现无限加载瀑布流

2024-01-25 10:40:02 60

本文实例为大家分享了JS实现无限加载瀑布流展示的具体代码，供大家参考，具体内容如下

1.在外层的div中，插入4个ul，ul左浮动
2.每次在创建节点之后，插入节点之前，要获取每个ul的高度，找到最小的高度，然后将新创建的li节点插入该ul中
3.当文档的高度-文档的可视高度<=鼠标的滑动距离时开始继续创建节点

代码：






瀑布流效果动态加载

*{
margin:0;
padding:0;
}

#content{
width:1000px;
border:3pxsolidred;
margin:0auto;
overflow:hidden;
}

#content>ul{
width:240px;
padding:4px;
border:1pxsolidblue;
float:left;
list-style-type:none;
}

#content>ul>li{
background-color:yellow;
font-size:100px;
color:white;
text-align:center;
margin-bottom:5px;
}

//随机[m,n]之间的整数 functionrandomNumber(m,n){ returnMath.floor(Math.random()*(n-m+1)+m); } //随机颜色 functionrandomColor(){ return"rgb("+randomNumber(0,255)+","+randomNumber(0,255)+","+randomNumber(0,255)+")"; } //获取当前的scrollTop varscrollTopDistance; //获取所有的ul varuls=document.getElementsByTagName("ul"); vari=0; vark=i; functionwaterFall(){ for(i=k;i

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

基于JavaScript实现无限加载瀑布流

热门推荐

随机推荐