瀑布流 颜色随机 加载滚动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
#box{width:700px;margin:0 auto;}
#box ul{width:198px; float:left; border:1px solid #000;margin-right:50px;}
#box ul li{ list-style:none; font-size:100px; color:#fff;}
</style>
<script>
function test()
{
var oBox=document.getElementById('box');
var aUl=oBox.children;
var n=0;
//每次20个
for(var i=0;i<20;i++)
{
function rnd(n,m)
{
return parseInt(Math.random()*(m-n+1)+n);
};
var oLi=document.createElement('li');
n++;
oLi.innerHTML=n;
oLi.style.height=rnd(100,400)+'px';
oLi.style.background='rgb('+rnd(0,255)+','+rnd(0,255)+','+rnd(0,255)+')';
//找最小的UL
var oUl;
if(aUl[0].offsetHeight<aUl[1].offsetHeight)
{
if(aUl[0].offsetHeight<aUl[2].offsetHeight)
{
oUl=aUl[0];
}
else
{
oUl=aUl[2];
};
}
else
{
if(aUl[1].offsetHeight<aUl[2].offsetHeight)
{
oUl=aUl[1];
}
else
{
oUl=aUl[2];
};
};
oUl.appendChild(oLi);
};
}
window.onload=function ()
{ test();
}
//滚动条在Y轴上的滚动距离
function getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if(document.body){
bodyScrollTop = document.body.scrollTop;
}
if(document.documentElement){
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
//文档的总高度
function getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if(document.body){
bodyScrollHeight = document.body.scrollHeight;
}
if(document.documentElement){
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
//浏览器视口的高度
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat"){
windowHeight = document.documentElement.clientHeight;
}else{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
window.onscroll = function(){
if(getScrollTop() + getWindowHeight() >= getScrollHeight()-300){
// alert("you are in the bottom!");
test()
}
};
</script>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul style="margin:0;"></ul>
</div>
<div class="footer" id="bm">
</body>
</html>
