瀑布流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
margin: 20px auto 0;
width: 90%;
border: 1px solid red;
overflow: hidden;
}
.wrap ul {
float: left;
width: 24%;
margin: 10px 0.5%;
list-style: none;
}
.wrap ul li {
font-size: 50px;
text-align: center;
background-color: firebrick;
margin: 10px 0;
}
</style>
<script type="text/javascript">
window.onload = function() {
//封装一个产生指定范围内随机数的产生
function random(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
//获取到所有的ul标签
var uls = document.getElementsByTagName("ul");
//封装 一个创建li标签的函数，根据传入数字n，创建出li n 个
function creatLi(count) {
//使用循环来创建li count 个 li
for(var i = 0; i < count; i++) {
//创建li
var li = document.createElement("li")
li.innerHTML = i;
li.style.height = random(100, 300) + "px";
//把li拼接进ul中：高度最短的ul中
//创建一个变量用来保存最短的ul标签
//创建一个最小值，比最小的小，找到最小值，赋给minHeightUl
var minHeightUl = uls[0];
for(var j = 0; j < uls.length; j++) {
if(minHeightUl.offsetHeight > uls[j].offsetHeight) {
minHeightUl = uls[j];
}
}
//经过for循环寻找后，minHeightUl保存的最小值，在拼接进li中
minHeightUl.appendChild(li);
}
var body = document.getElementsByTagName("body")[0];
var html = document.getElementsByTagName("html")[0];
window.onscroll = function() {
for(var k = 0; k < 4; k++) {
if(body.scrollTop >= uls[k].offsetHeight - html.clientHeight) {
creatLi(30);
}
}
}
}
creatLi(30)
}
</script>
</head>
<body>
<div class="wrap">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>
复制代码
1、1 瀑布流方法二（考虑浏览器兼容）
//方法二
/*var wrap = document.getElementById("wrap");
window.onscroll = function() {
if((document.documentElement.scrollTop || document.body.scrollTop) >= wrap.offsetHeight - document.documentElement.clientHeight) {
//console.log(document.documentElement.scrollTop || document.body.scrollTop);
//console.log(wrap.offsetHeight);
creatLi(30);
}
}
}*/
来源： http://10.0.88.88:8083/forum.php?mod=viewthread&tid=43756
