javascript瀑布流的基本思路以及代码

A<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
padding: 0;
margin: 0;
width: 350px;
border:1px solid #ccc;
margin-left: 10px;
float: left;
}
div{
clear:both;
}
li{
list-style: none;
}
</style>
<script type="text/javascript">
function rnd(n,m){
return parseInt(Math.random()*(m-n)+n)
}
window.onload = function(){
var aUl = document.getElementsByTagName('ul');

//创建20个元素,并往ul中添加，当然这里可以换成你要添加的内容
function create(){
for(var i = 0; i <20; i++){
var oLi = document.createElement('li');
oLi.style.width = '330px';
oLi.style.margin='10px';
oLi.style.height=rnd(200,320)+'px';
oLi.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')'
if(aUl[0].offsetHeight<aUl[1].offsetHeight && aUl[0].offsetHeight<aUl[2].offsetHeight){
aUl[0].appendChild(oLi);
}else if(aUl[1].offsetHeight <aUl[2].offsetHeight){
aUl[1].appendChild(oLi);
}else{
aUl[2].appendChild(oLi);
}
}
}
create();

//判断,当当前页面移到底部时，再次进行加载
window.onscroll = function(){
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var winH = document.documentElement.clientHeight;
var disY = scrollY+winH;
if(disY>=document.body.offsetHeight){
create();
}
}

}
</script>
</head>
<body>
<ul></ul>
<ul></ul>
<ul></ul>
<div></div>
</body>
</html>

posted @ 2016-07-31 22:31  207MP  阅读(104)  评论(0)    收藏  举报