<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wraps{
margin: 20px auto 0;
width: 90%;
border: 1px solid yellowgreen;
overflow: hidden;
}
.wraps ul{
float: left;
width: 20%;
margin: 10px 0;
list-style: none;
}
.wraps ul li{
font-size: 50px;
text-align: center;
margin: 10px 0;
}
</style>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
function random(min,max){
return parseInt(Math.random()*(max-min)+min);
}
var $wraps=$('.wraps')[0];
var $uls=$('ul');
function CreateLi(count){
for( var i=0;i<count;i++){
var li=document.createElement('li');
li.innerText=i;
li.style.height=random(100,400)+'px';
li.style.background='rgba('+random(0,255)+','+random(0,255)+','+random(0,255)+','+Math.random()+')';
li.style.color='rgb('+random(0,255)+','+random(0,255)+','+random(0,255)+')';
var minHeightUl=$uls[0];
for(var j=0;j<$uls.length;j++){
if(minHeightUl.offsetHeight>$uls[j].offsetHeight){
minHeightUl=$uls[j];
}
}
minHeightUl.appendChild(li);
}
}
CreateLi(20);
window.onscroll=function(){
if((document.documentElement.scrollTop||document.body.scrollTop)>$wraps.offsetHeight-document.documentElement.clientHeight){
CreateLi(20);
}
}
})
</script>
</head>
<body>
<div class="wraps">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>
