js實(shí)現(xiàn)瀑布流效果（自動(dòng)生成新的內(nèi)容）
更新時(shí)間：2017年03月16日 09:54:17 作者：shangpudxd
本文主要介紹了js實(shí)現(xiàn)瀑布流效果：當(dāng)滾動(dòng)條接近底部會(huì)自動(dòng)生成新的內(nèi)容。具有很好的參考價(jià)值。下面跟著小編一起來(lá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>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(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+絕對(duì)定位的實(shí)現(xiàn)
- 純js實(shí)現(xiàn)瀑布流展現(xiàn)照片(自動(dòng)適應(yīng)窗口大小)
相關(guān)文章
js學(xué)習(xí)總結(jié)_選項(xiàng)卡封裝(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇js學(xué)習(xí)總結(jié)_選項(xiàng)卡封裝(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
關(guān)于localStorage的存儲(chǔ),讀取,刪除
這篇文章主要介紹了關(guān)于localStorage的存儲(chǔ)，讀取，刪除方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
JavaScript內(nèi)置對(duì)象之Array的使用小結(jié)
這篇文章主要介紹了JavaScript內(nèi)置對(duì)象之Array的使用小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
詳解webpack的文件監(jiān)聽(tīng)實(shí)現(xiàn)(熱更新)
這篇文章主要介紹了詳解webpack的文件監(jiān)聽(tīng)實(shí)現(xiàn)(熱更新)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
js獲取單選按鈕的數(shù)據(jù)...2006-11-11
JavaScript 浮動(dòng)定位提示效果實(shí)現(xiàn)代碼
本來(lái)想做一個(gè)集合浮動(dòng)定位和鼠標(biāo)跟隨的tooltips效果，但發(fā)現(xiàn)定位和鼠標(biāo)跟隨在一些關(guān)鍵的地方還是不同的，還是分開(kāi)來(lái)吧。2009-09-09
javascript判斷firebug是否開(kāi)啟的方法
這篇文章主要介紹了javascript判斷firebug是否開(kāi)啟的方法,結(jié)合實(shí)例形式分析了javascript基于console控制臺(tái)方法判斷firebug開(kāi)啟狀態(tài)的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
詳解微信小程序-獲取用戶session_key,openid,unionid - 后端為nodejs
這篇文章主要介紹了微信小程序獲取session_key,openid,unionid的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了基于javascript原生判斷DOM是否加載完畢,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
JavaScript數(shù)組和對(duì)象的復(fù)制
本篇文章主要介紹了JavaScript數(shù)組和對(duì)象的復(fù)制的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03