|
效果：
图片：33.png  技术知识点： 获取文档对象的可视区窗口高度(不包括滚动条) document .documentElement.clientHeight 获取文档滚动条位置距离最上方的距离 document . documentElement.scrollTop 元素到父元素的top方向的距离元素.offsetTop 获取属性 元素.getAttribute(属性名); 设置属性值 元素.setAttribute (属性名，值); 代码： <!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 type="text/css">
*{
margin: 0;
padding: 0;
}
ul>li{
list-style-type: none;
}
#list ul{
float:left;
border:1px solid black;
margin-right: 20px;
width: 400px;
}
#list{
width: 1266px;
margin: auto;
}
#list::after{
clear: both;
display: block;
content: "";
}
</style>
<body>
<div id="list">
<ul>
</ul>
<ul></ul>
<ul></ul>
</div>
<script type="text/javascript">
// 每一页数据，从后台去拿数据
var pageSize = 20;
var ulArr = document.querySelectorAll("#list ul");
var arr = [];
for(var i=0;i<ulArr.length;i++){
arr.push(ulArr<i>);
}
getNextPageData(); //打开网页时，就要展示一页数据
function getNextPageData(){
for(var i=0;i<pageSize;i++){
createLi();
}
}
window.onscroll = function(){
var srcollTop = document.documentElement.scrollTop;
var clientHeight = document.documentElement.clientHeight; // 可视高度
var bodyHeight = document.body.offsetHeight; //当前网页的高度
if(srcollTop + clientHeight >= bodyHeight -20){
console.log("in");
getNextPageData();
}
}
function createLi(){
var li = document.createElement("li");
li.style.height = getRandom(300,500) +"px";
li.style.backgroundColor = "rgb("+getRandom(0,255)+","+getRandom(0,255)+","+getRandom(0,255)+")";
// 创建后，加入到网页中
// 判断当的ul，哪一个的高度最短，谁最短当前的li就加入到哪一个ul里
//1. 得到三个ul(全局去)
// 2. 找高度最小的ul
// 数组的sort方法
// sort只有数组才有 ， document.querySelectorAll("#list ul");获取出来的是一个伪数组，不能调用数组的方法
arr.sort(function(a,b){
return a.offsetHeight - b.offsetHeight;
});
arr[0].appendChild(li);
}
// 产生随机数的方法
function getRandom(n,m){ // n-m
return Math.floor(Math.random()*(m-n+1)+n);
}
</script>
</body>
</html></i>视频地址： https://www.bilibili.com/video/BV1iF411M7kJ |
|
|
公众号
