當(dāng)滾動(dòng)條接近底部會(huì)自動(dòng)生成新的內(nèi)容(色塊)

效果圖：

代碼如下：

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()

}

}

}

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

總結(jié)

以上是生活随笔為你收集整理的html li 做瀑布流,js实现瀑布流效果（自动生成新的内容）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。