需要jq的支持哦 也可以自己寫原生js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
ul{
width:300px;float:left;margin:10px;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
//隨機(jī)數(shù)
function ran(n,m){
return parseInt(Math.random()*(m-n)+n);
}
//創(chuàng)造Li標(biāo)簽
function createLi(){
var oLi=$('<li></li>')
oLi.css({'height':ran(200,500)+'px','background':'rgb('+ran(0,256)+','+ran(0,256)+','+ran(0,256)+')'})
return oLi
}
//核心編程
$(function(){
var aUl=$('ul');
var arr=[];
function create30Li(){
for(var i=0;i<30;i++){
var oLi=createLi();
for(var j=0;j<aUl.length;j++){
arr.push(aUl[j]);
}
arr.sort(function(a,b){
return a.offsetHeight-b.offsetHeight;
})
arr[0].appendChild(oLi[0]);
}
}
create30Li();
//滾動(dòng)加載
$(window).scroll(function(){
var scrollT=document.documentElement.scrollTop || document.body.scrollTop;
var clientH=document.documentElement.clientHeight;
var bodyH=document.body.scrollHeight;
if(scrollT+clientH>bodyH-200){
create30Li()
}
})
})
</script>
</head>
<body>
<div>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>
