html li 做瀑布流,js实现瀑布流效果（自动生成新的内容）

当滚动条接近底部会自动生成新的内容(色块)

效果图：

代码如下：

Title

*{list-style: none;}

div{overflow: hidden;}

ul{float: left;}

li{width:300px; margin-bottom:10px;}

function rnd(n,m){

return parseInt(Math.random()*(m-n))+n;

}

function cl(){

var li = document.createElement('li');

li.style.height=rnd(100,500)+'px';

li.style.background='rgb('+rnd(0,255)+','+rnd(0,255)+','+rnd(0,255)+')';

return li;

}

window.οnlοad=function(){

var aUl = document.getElementsByTagName('ul');

//alert(aUl.length);

function c20(){

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

var arr =[];

for(var j=0;j

arr.push(aUl[j])

}

arr.sort(function(n,m){

return n.offsetHeight- m.offsetHeight

});

arr[0].appendChild(cl());

}

}

c20();

window.οnscrοll=function(){

var arr = [];

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

arr.push(aUl[j])

}

arr.sort(function (n, m) {

return n.offsetHeight - m.offsetHeight

});

var n = (document.body.scrollTop || document.documentElement.scrollTop) + document.documentElement.clientHeight;

if (n > arr[0].offsetHeight) {

c20()

}

}

}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！