js实现瀑布流效果（自动生成新的内容)

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

效果图：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style * { list-style : none；} div{overflow:隐藏；} ul { float : left } Li { width :300 px边距-底部：10 px}/样式脚本函数rnd(n，m){ return parsent(数学。random()*(m-n))n；}函数cl(){ var Li=document。创建元素(“李”)；li.style.height=rnd(100，500)' px '；李。风格。背景=' RGB(' rnd(0，255)'，' rnd(0，255)'，' rnd(0，255)')'；回礼；}窗口。onload=function(){ var AuL=document。getelementsbytagname(' ul ')；//alert(AuL)。长度)；函数C20(){ for(var I=0；i20I){ var arr=[]；for(var j=0；jaUl.lengthj){ arr。push(AuL[j])} arr。sort(函数(n，m){ return n . offset theight-m . offset theight })；arr[0].appendChild(cl())；} } C20()；窗户。onscroll=function(){ var arr=[]；for(var j=0；j aUl.lengthj){ arr。push(AuL[j])} arr。sort(函数(n，m){ return n . offset theight-m . offset theight })；var n=(文档。尸体。向上滚动| |文档。文档元素。向上滚动)文档。文档元素。客户身高；if (n arr[0]).offset theight){ C20()} } } } } }/script/head dydiv ul/ul/ul/div/body/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！