當滾動條接近底部會自動生成新的內容(色塊)

效果圖：

代碼如下：

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

}

}

}

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。