瀑布流 颜色随机 加载滚动
<!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.οnlοad=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>
轉載于:https://www.cnblogs.com/moliwanzi/p/3939852.html
總結
以上是生活随笔為你收集整理的瀑布流 颜色随机 加载滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hdu 1598 find the mo
- 下一篇： HTML5 Canvas 自定义笔刷