说明:运行demo的时候请将浏览器模式调整到苹果5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 100%;
height: auto;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
li {
list-style: none;
width: 130px;
height: 130px;
background: pink;
float: left;
margin: 10px;
}
</style>
</head>
<body>
<ul class="clearfix" id="list-group">
</ul>
</body>
<script>
function createLi(num) {
var ulDom = document.getElementById("list-group");
for (var i = 0; i < num; i++) {
var liDom = document.createElement("li");
liDom.innerHTML = i;
ulDom.appendChild(liDom);
}
}
createLi(10);
var maxHeight = document.documentElement.clientHeight;
window.onscroll = function() {
var liDomHeight = document.getElementById("list-group").lastChild.offsetTop;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (liDomHeight < (maxHeight + scrollTop)) {
createLi(10);
}
}
</script>
</html>
</html>
转载请注明原文地址: https://www.6miu.com/read-22966.html
