记录下之前写的瀑布流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 1200px;
margin: 0 auto;
}
ul,li{
list-style: none;
}
ul{
width: 350px;
margin-right: 20px;
/* border: 1px solid red; */
float: left;
overflow: hidden;
}
li{
width: 100%;
height: 100%;
margin-bottom: 10px;
}
</style>
<body>
<div>
<ul>
</ul>
<ul>
</ul>
<ul>
</ul>
</div>
</body>
<script>
var uldom = document.querySelectorAll("ul")
const getdata = () =>{
for(let i=0; i<30; i++){
let arr = [...uldom]
arr.sort((a,b)=>{
return a.offsetHeight-b.offsetHeight
})
arr[0].appendChild(createlidom())
}
}
const createlidom = () =>{
var lidom = document.createElement('li')
lidom.style.height = createrandom(500,100) + 'px'
lidom.style.backgroundColor = 'rgb('+createrandom(255,0)+','+createrandom(255,0)+','+createrandom(255,0)+')'
return lidom
}
const createrandom = (m,n) =>{
return Math.floor(Math.random()*(m-n))+n
}
window.onscroll = () =>{
var bodyh = document.body.scrollHeight
var clih = document.documentElement.clientHeight
var scrollh = document.documentElement.scrollTop;
if(bodyh-scrollh-clih <= 100){
console.log(bodyh,'bodyh',clih,'clih',scrollh,'scrollh')
getdata()
}
}
getdata()
</script>
</html>
