滝の流れ効果のソース
1665 ワード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#box{width: 888px; margin:0 auto; overflow: hidden;}
ul{width:200px; border:1px solid red; float: left; margin:10px;}
ul li{ width:200px; height:150px; background:#ccc; margin:10px 0;}
</style>
<script type="text/javascript">
function rnd(n,m){
return parseInt(n+Math.random()*(m-n));
}
function createLi(){
var oLi = document.createElement('li');
oLi.style.height=rnd(150,301)+'px';
oLi.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
return oLi;
}
window.onload=function(){
var oBox = document.body.children[0];
var aUl = oBox.children;
function createLi20(){
for(var i=0;i<20;i++){
var oLi = createLi();
var arr = [];
for(var j=0;j<aUl.length;j++){
arr.push(aUl[j]);
}
arr.sort(function(u1,u2){
return u1.offsetHeight-u2.offsetHeight;
});
arr[0].appendChild(oLi);
}
}
createLi20();
window.onscroll=function(){
var scrollT = document.documentElement.scorllTop||document.body.scrollTop;
var winH = document.documentElement.clientHeight;
var scrollBottom = scrollT+winH;
if(scrollBottom>=document.body.scrollHeight-500){
createLi20();
}
};
};
</script>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>