<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
}
#box{
width:800px;
border:1px solid red;
overflow: hidden;
margin: 10px auto;
}
ul{
list-style: none;
width: 190px;
padding: 5px;
float:left;
}
ul li{
margin-bottom: 10px;
background-color: red;
font-size:30px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var ul=document.getElementsByTagName("ul");
function random(n,m){
var num=Math.max(n,m)-Math.min(n,m);
return Math.round(Math.random()*num+Math.min(n,m));
}
var htext=0;
function creatLi(){
for(var i=0;i<20;i++){
var li=document.createElement("li");
htext++;
li.innerHTML=htext;
li.style.height=random(100,300)+"px";
var arr=[];
for(var z=0;z<ul.length;z++){
arr.push(ul[z].offsetHeight);
}
var min=arr[0];
var mindex=0;
for(var j=0;j<arr.length;j++){
if(min>arr[j]){
min=arr[j];
mindex=j;
}
}
ul[mindex].appendChild(li);
}
}
creatLi();
window.onscroll=function(){
var H=document.documentElement.scrollTop || document.body.scrollTop;
var HH=document.documentElement.offsetHeight;
var HHH=document.documentElement.clientHeight;
if(HH-H == HHH){
creatLi();
}
}
}
</script>
</html>
