js规则的瀑布流
程序员文章站
2022-03-11 19:21:17
...
规则的瀑布流
具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 1000px;
margin: 0 auto;
background: #ccc;
}
ul{
list-style: none;
float: left;
width: 180px;
margin:0 5px;
}
.oli{
width: 100%;
height: 280px;
background: red;
color: #fff;
font-size: 100px;
text-align: center;
float: left;
margin: 3px 0;
}
</style>
</head>
<body>
<div id="box">
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
</div>
</body>
<script type="text/javascript">
var olist=document.getElementsByClassName('list');
var n=1;
function fun(){
for(var i=0; i<20; i++){
//创建li标签
var oli=document.createElement('li');
//给li标签添加编码序号
oli.innerHTML=n++;
oli.setAttribute('class','oli')
var oulHeight=[];
//循环将ul的高度的值添加到数组的里面
//[0,0,0,0]
for(var j=0; j<olist.length; j++){
oulHeight.push(olist[j].offsetHeight);
}
//获取数组中下标为0的元素赋值给minH minH=0
console.log(oulHeight)
var minH=oulHeight[0];
var index=0;
//循环ul的长度，minH=0 第一次m是0 oulHeight[0]
for(var m=0; m<olist.length; m++){
if(minH>oulHeight[m]){
minH=oulHeight[m];
index=m;
}
}
//把创建好的li标签插入到下标为index的数组当中去
olist[index].appendChild(oli)
//i第一次循环后 将创建好的第一个li标签闯入到了第一个ul里面去
}
}
fun()
window.onscroll=function(){
//滚动条顶端到顶部的距离值
var h=document.documentElement.scrollTop||document.body.scrollTop;
//div元素的高
var hei=document.documentElement.offsetHeight;
//可视区域的高
var c=document.documentElement.clientHeight;
// console.log(hei)//1002 1002-969=33
// console.log(c)//969
// console.log(h)//33
if(h>=(hei-c)){
fun()
}
}
</script>
</html>
效果图