<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.wrap {
width: 800px;
border: 1px solid mediumspringgreen;
margin: 0 auto;
overflow: hidden;
}
.wrap ul {
list-style: none;
width: 200px;
padding: 10px;
float: left;
box-sizing: border-box;
}
.wrap ul li {
background-color: deeppink;
font-size: 50px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<!--<li>1</li>-->
<!--<li>6</li>-->
</ul>
<ul>
<!--<li>2</li>-->
</ul>
<ul>
<!--<li>3</li>-->
</ul>
<ul>
<!--<li>4</li>-->
</ul>
</div>
<script type="text/javascript">
var aUl = document.getElementsByTagName("ul");
function randH(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
// 定义一个函数createli()用于一次生成20个小块
function createLi() {
for (var i = 0; i < 20; i++) {
var oLi = document.createElement("li");
oLi.innerHTML = i;
oLi.style.height = randH(100, 300) + "px";
var minH = aUl[0].offsetHeight;
var minI = 0;
for (var j = 0; j < aUl.length; j++) {
if (minH > aUl[j].offsetHeight) {
minH = aUl[j].offsetHeight;
minI = j;
}
}
aUl[minI].appendChild(oLi);
}
}
// 页面一加载就调用一下函数
createLi();
// 翻页 页面被滚动了，响应onscroll事件，这个事件可的scrollTop属性
window.onscroll = function(){
// 窗口可视高度
var windowH = document.documentElement.clientHeight;
// 内容高度
var bodyH = document.body.offsetHeight;
// 滚动距离
var gunH = bodyH - windowH;
// 滚动条的offsetop
var gunTop = document.body.scrollTop;
if (gunTop >= gunH) {
createLi();
}
}
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
