瀑布流
<!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() {
//封裝一個(gè)產(chǎn)生指定范圍內(nèi)隨機(jī)數(shù)的產(chǎn)生
function random(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
//獲取到所有的ul標(biāo)簽
var uls = document.getElementsByTagName("ul");
//封裝 一個(gè)創(chuàng)建li標(biāo)簽的函數(shù)伟叛，根據(jù)傳入數(shù)字n叛买，創(chuàng)建出li n 個(gè)
function creatLi(count) {
//使用循環(huán)來創(chuàng)建li count 個(gè) li
for(var i = 0; i < count; i++) {
//創(chuàng)建li
var li = document.createElement("li")
li.innerHTML = i;
li.style.height = random(100, 300) + "px";
//把li拼接進(jìn)ul中：高度最短的ul中
//創(chuàng)建一個(gè)變量用來保存最短的ul標(biāo)簽
//創(chuàng)建一個(gè)最小值囤萤，比最小的小唠叛，找到最小值给涕，賦給minHeightUl
var minHeightUl = uls[0];
for(var j = 0; j < uls.length; j++) {
if(minHeightUl.offsetHeight > uls[j].offsetHeight) {
minHeightUl = uls[j];
}
}
//經(jīng)過for循環(huán)尋找后怖糊，minHeightUl保存的最小值纱扭，在拼接進(jìn)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>
復(fù)制代碼
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
