ul版瀑布流onscroll

来源：互联网发布：ipad 传输软件编辑：程序博客网时间：2024/06/16 11:59

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8" />

<styletype="text/css">

.wrap{

width:800px;

border:1px solid mediumspringgreen;

margin:0 auto;

overflow:hidden;

}

.wrapul {

list-style:none;

width:200px;

padding:10px;

float:left;

box-sizing:border-box;

}

.wrapul li{

background-color: deeppink;

font-size:50px;

margin-bottom:10px;

}

</style>

</head>

<body>

<divclass="wrap">

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

<scripttype="text/javascript">

varaUl = document.getElementsByTagName("ul");

functionrandH(min,max) {

returnMath.floor(Math.random() * (max - min + 1) + min)

}

// 定义一个函数createli()用于一次生成20个小块

functioncreateLi() {

for(var i = 0; i< 20; i++) {

varoLi = document.createElement("li");

oLi.innerHTML= i;

oLi.style.height= randH(100, 300)+ "px";

varminH = aUl[0].offsetHeight;

varminI = 0;

for(var j = 0; j< aUl.length; j++) {

if(minH > aUl[j].offsetHeight) {

minH= aUl[j].offsetHeight;

minI= j;

}

aUl[minI].appendChild(oLi);

}

// 页面一加载就调用一下函数

createLi();

// 翻页页面被滚动了，响应onscroll事件，这个事件可的scrollTop属性

window.onscroll= function(){

// 窗口可视高度

varwindowH = document.documentElement.clientHeight;

// 内容高度

varbodyH = document.body.offsetHeight;

// 滚动距离

vargunH = bodyH - windowH;

// 滚动条的offsetop

vargunTop = document.body.scrollTop;

if(gunTop >= gunH) {

createLi();

}

</script>

</body>

</html>

0 0