<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com">
<meta name="copyright" content="智能社 - zhinengshe.com">
<title>智能社 - www.zhinengshe.com</title>
<style>
* { margin:0; padding:0; }
div { width:966px; margin:10px auto; }
ul { float:left; width:300px; margin:0 10px; border:1px solid red; }
li { background:#ccc; list-style:none; margin-bottom:20px; }
</style>
<script>
window.onload=function (){
var aUl=document.getElementsByTagName(‘ul‘);
var aTmpUl=[];
for(var i=0;i<aUl.length;i++)
{
aTmpUl.push(aUl[i]);
}
appendLi();
function appendLi()
{
for(var i=0;i<20;i++)
{
var oLi=document.createElement(‘li‘);
oLi.style.height=rnd(100,300)+‘px‘;
oLi.innerHTML=‘你吃饭了吗？‘;
//比较大小获得高度最小的一个
aTmpUl.sort(function(ul1,ul2){
return ul1.offsetHeight-ul2.offsetHeight;
});
aTmpUl[0].appendChild(oLi);
}
};
window.onscroll=function()
{
var scrollHeigt=document.body.scrollHeight;//获取内容的高度，浏览器不同也有差异
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var scrllBottom=scrollTop+document.documentElement.clientHeight;
if(scrllBottom>=scrollHeigt)
{
appendLi();
}
};
function rnd(n,m)
{
return parseInt(Math.random()*(m-n)+n);
}
};
</script>
</head>
<body>
<div>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>
时间： 2024-07-31 09:12:24