js實(shí)現(xiàn)瀑布流效果(自動(dòng)生成新的內(nèi)容)
當(dāng)滾動(dòng)條接近底部會(huì)自動(dòng)生成新的內(nèi)容(色塊)
效果圖:
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{list-style: none;} div{overflow: hidden;} ul{float: left;} li{width:300px; margin-bottom:10px;} </style> <script> 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.onload=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<aUl.length;j++){ arr.push(aUl[j]) } arr.sort(function(n,m){ return n.offsetHeight- m.offsetHeight }); arr[0].appendChild(cl()); } } c20(); window.onscroll=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() } } } </script> </head> <body> <div> <ul></ul> <ul></ul> <ul></ul> </div> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
- 原生js實(shí)現(xiàn)瀑布流布局
- 純js實(shí)現(xiàn)瀑布流布局及ajax動(dòng)態(tài)新增數(shù)據(jù)
- javascript瀑布流式圖片懶加載實(shí)例解析與優(yōu)化
- javascript瀑布流式圖片懶加載實(shí)例
- javascript實(shí)現(xiàn)瀑布流加載圖片原理
- js實(shí)現(xiàn)的美女瀑布流效果代碼
- javascript自適應(yīng)寬度的瀑布流實(shí)現(xiàn)思路
- 原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局
- 解析瀑布流布局:JS+絕對定位的實(shí)現(xiàn)
- 純js實(shí)現(xiàn)瀑布流展現(xiàn)照片(自動(dòng)適應(yīng)窗口大小)
相關(guān)文章
javascript學(xué)習(xí)隨筆(編寫瀏覽器腳本 Navigator Scripting )
javascript學(xué)習(xí)隨筆(編寫瀏覽器腳本 Navigator Scripting )...2007-03-03js中幾種循環(huán)的退出方式實(shí)例總結(jié)
提到在一段程序中如果碰到需要終止,結(jié)束一個(gè)循環(huán),函數(shù)或者一段代碼,一般會(huì)想到以下這幾個(gè)關(guān)鍵字return、continue、break,這篇文章主要給大家介紹了關(guān)于js中幾種循環(huán)的退出方式,需要的朋友可以參考下2022-12-12JavaScript——DOM操作——Window.document對象詳解
下面小編就為大家?guī)硪黄狫avaScript——DOM操作——Window.document對象詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07簡單時(shí)間提示DEMO從0開始一直進(jìn)行計(jì)時(shí)
點(diǎn)擊按鈕輸入框會(huì)從0開始一直進(jìn)行計(jì)時(shí),具體的實(shí)現(xiàn)示例如下,感興趣的朋友可以嘗試操作下哦2013-11-11javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法,實(shí)例分析了javascript操作div層的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02js實(shí)現(xiàn)滑動(dòng)觸屏事件監(jiān)聽的方法
這篇文章主要介紹了js實(shí)現(xiàn)滑動(dòng)觸屏事件監(jiān)聽的方法,適用于手機(jī)端觸屏滑動(dòng)事件的監(jiān)聽技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05微信小程序ajax實(shí)現(xiàn)請求服務(wù)器數(shù)據(jù)及模版遍歷數(shù)據(jù)功能示例
這篇文章主要介紹了微信小程序ajax實(shí)現(xiàn)請求服務(wù)器數(shù)據(jù)及模版遍歷數(shù)據(jù)功能,結(jié)合實(shí)例形式分析了微信小程序ajax調(diào)用及模板wx:for循環(huán)列表渲染相關(guān)操作技巧,需要的朋友可以參考下2017-12-12