<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#wrap{width: 900px;margin: 0 auto;border: 1px solid #CCCCCC;}
ul{list-style: none;float: left;width: 300px;}
ul li{width: 280px;margin-left: 20px;margin-top: 20px;background: lightblue;}
</style>
</head>
<body>
<div id="wrap">
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>
<script type="text/javascript">
// //获取所有的ul
// var ulArray = document.querySelectorAll('ul');
// //随机一个min到max的数字
// function randHeight(min,max){
// return parseInt(Math.random()*(max-min +1)+min)
// }
//
// //查找ulArray高度最小的ul 并且返回最小的ul
// function findMinUL(){
// var min = ulArray[0];
//
// for(var i = 0; i < ulArray.length;i++){
// if(min.offsetHeight > ulArray[i].offsetHeight){
// min = ulArray[i];
// }
// }
// return min;
// }
//
// function waterWallFun(){
// function createLi(){
// for(var i = 0; i < 20; i++){
// var li = document.createElement('li');
//
//
//
// li.innerHTML = i + 1;
// //给li随机一个高度
// li.style.height = randHeight(150,400) +'px';
//
//
//
// //找出当前三个ul 中高度最小的ul
// var minUl = findMinUL();
// //把创建的li拼接到找到的最小的ul
// minUl.appendChild(li);
//
//
// }
// }
// createLi();
//
//// 检测屏幕的活动过程
// window.onscroll = function(){
// //计算滚动条是否滑到了最底部?
// //1.拿出滚动的距离
// var hasScolled =
// document.documentElement.scrollTop ||
// document.body.scrollTop;
// //计算滑动的最大范围
//
// var maxHeight = document.documentElement.offsetHeight-
// document.documentElement.clientHeight;
// if(hasScolled >= maxHeight){
// createLi();
// }
// }
// }
// waterWallFun();
var ulArray = document.querySelectorAll('ul');
//取一个随机数
function randHeight(min,max){
return parseInt(Math.random()*(max-min+1)+min)
}
//找出 ul 高度最小的一个
function minUl(){
var min = ulArray[0];
for(var i = 0; i < ulArray.length;i++){
if(min.offsetHeight > ulArray[i].offsetHeight){
min = ulArray[i];
}
}
return min;
}
// 获取 ul
function waterFallFun(){
function creatLi(){
for(var i = 0; i < 20; i++){
var li = document.createElement('li');
li.innerHTML = i + 1;
li.style.height = randHeight(150,400) +'px';
//获取最小的ul
var minul = minUl();
minul.appendChild(li);
}
}
creatLi();
window.onscroll = function(){
//检测滚动条是否到了底部
var hasHeight = document.documentElement.scrollTop || document.body.scrollTop;
var aaa = document.documentElement.offsetHeight - document.documentElement.clientHeight;
if( hasHeight >= aaa){
creatLi();
}
}
}
waterFallFun();
</script>
