<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#box {
margin: 0 auto;
966px;
height:auto;
overflow:hidden;
}
#box ul {
200px;
border: #000 1px solid;
float: left;
margin-right: 20px;
}
#box ul li {
180px;
margin: 10px 9px;
border: #666 1px solid;
}
</style>
<script>
function rnd(n,m){
return parseInt(Math.random() * (m - n) + n);
}
function createLi(){
var oLi = document.createElement('li');
oLi.style.height = rnd(100,400) + 'px';
oLi.style.background = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
return oLi;
}
window.onload = function(){
var oBox = document.getElementById('box');
var aUl = oBox.children;
function appendLi(){
for(var i = 0; i < 20; i++){
var oLi = createLi();
var arrUl = [];
for(var j = 0; j < aUl.length; j++){
arrUl[j] = aUl[j];
}
arrUl.sort(function(n1,n2){
return n1.offsetHeight - n2.offsetHeight;
});
arrUl[0].appendChild(oLi);
}
}
appendLi();
window.onscroll = function(){
var oscrollH = document.documentElement.scrollTop || document.body.scrollTop;
var clientH = document.documentElement.clientHeight;
var oBoxH = oBox.scrollHeight;
if(oscrollH + clientH >= oBoxH - 300){
appendLi();
}
}
}
</script>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>