瀑布流的實現(xiàn)方式（原生js+jquery+css3）

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：1382 次日期：2016-07-27 16:10:07

溫馨提示：易賢網(wǎng)小編為您整理了“瀑布流的實現(xiàn)方式（原生js+jquery+css3）”,方便廣大網(wǎng)友查閱！

這篇文章主要為大家詳細介紹了原生js+jquery+css3實現(xiàn)瀑布流的相關(guān)代碼，三種實現(xiàn)瀑布流的方法，感興趣的小伙伴們可以參考一下

前言

項目需求要弄個瀑布流的頁面，用的是waterfall這個插件，感覺還是可以的，項目趕就沒自己的動手寫。最近閑來沒事，就自己寫個。大致思路理清楚，還是挺好實現(xiàn)的...

原生javascript版

<!DOCTYPE html>

<head>

<title>瀑布流-javascript</title>

<style>

*{margin:0;padding:0;}

#content{position: relative;margin:0 auto;}

.box{padding:10px;float: left;}/*首行浮動，第二行開始絕對定位*/

.box img{width: 180px;height:auto;display: block;}

</style>

window.onload=function(){

waterfall('content','box');

//改變窗口大小時，重新排列

window.onresize = function(){

waterfall('content','box');

}

//如果數(shù)據(jù)不夠，沒出現(xiàn)滾動條，自動加載數(shù)據(jù)

var time=setInterval(function(){

if(checkscrollside()){

addDate();//插入數(shù)據(jù)

waterfall('content','box');//加載完數(shù)據(jù)從新排列

}else{

clearInterval(time);

window.onscroll=function(){

if(checkscrollside()){

addDate();

waterfall('content','box');

};

}

},1000)

}

// 數(shù)據(jù)插入

function addDate(){

var dataInt=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];//模擬數(shù)據(jù)，也可以是對象

var oParent = document.getElementById('content');

for(var i=0;i<dataInt.length;i++){//循環(huán)插入數(shù)據(jù)

var oBox=document.createElement('div');

oBox.className='box';

oParent.appendChild(oBox);

var oImg=document.createElement('img');

oImg.src='./img/'+dataInt[i];

oBox.appendChild(oImg);

}

//主函數(shù)

function waterfall(parentID,childClass){

var oParent=document.getElementById(parentID);

var arrBox=getClassObj(parentID,childClass);// getClassObj()獲取子class的數(shù)組

var iBoxW=arrBox[0].offsetWidth;// 獲取瀑布流塊的寬度

var num=Math.floor(document.documentElement.clientWidth/iBoxW);//計算窗口能容納幾列

oParent.style.width=iBoxW*num+'px';//設(shè)置父級寬度

var arrBoxH=[];//數(shù)組，用于存儲每列中的所有塊框相加的高度

for(var i=0;i<arrBox.length;i++){//遍歷數(shù)組瀑布流塊

var boxH=arrBox[i].offsetHeight;//獲取當(dāng)前塊的高度

if(i<num){

arrBox[i].style.cssText="";//防止用戶改變窗口大小，到時樣式出錯

arrBoxH[i]=boxH; //第一行中的num個塊box 先添加進數(shù)組arrBoxH

}else{

var minH=Math.min.apply(null,arrBoxH);//獲取數(shù)組arrBoxH中的最小值minH

var minHIndex=getminHIndex(arrBoxH,minH);//遍歷數(shù)組獲取最小值minH的索引

arrBox[i].style.position='absolute';//設(shè)置絕對位移

arrBox[i].style.top=minH+'px';

arrBox[i].style.left=minHIndex*iBoxW+'px';//也可以直接獲取arrBox[minHIndex].offsetLeft

arrBoxH[minHIndex]+=arrBox[i].offsetHeight;//添加后，更新最小列高

}

//獲取子class的數(shù)組

function getClassObj(parentID,childClass){

var oParent=document.getElementById(parentID);

var allChildObj=oParent.getElementsByTagName('*');//獲取父級下的所有子集

var childObj=[];//創(chuàng)建一個數(shù)組用于收集子元素

for (var i=0;i<allChildObj.length;i++) {//遍歷子元素、判斷類別、壓入數(shù)組

if (allChildObj[i].className==childClass){

childObj.push(allChildObj[i]);

}

};

return childObj;

}

//獲取數(shù)組最小值的索引

function getminHIndex(arr,minH){

for(var i in arr){

if(arr[i]==minH){

return i;

}

// 判斷滾動條是否到底部

function checkscrollside(){

var arrBox=getClassObj("content",'box');

//獲取最后一個瀑布流塊的高度：距離網(wǎng)頁頂部(實現(xiàn)未滾到底就開始加載)

var lastBoxH=arrBox[arrBox.length-1].offsetTop;

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//獲取滾動條卷走的高度

var documentH=document.documentElement.clientHeight;//顯示頁面文檔的高

return (lastBoxH<scrollTop+documentH)?true:false;//到達指定高度后返回true，觸發(fā)waterfall()函數(shù)

}

</script>

</head>

<body>

</div>

</body>

</html>

jquery版本

<!DOCTYPE html>

<head>

<title>瀑布流-jquery</title>

<style>

*{margin:0;padding:0;}

#content{position: relative;margin:0 auto;}

.box{padding:10px;float: left;}

.box img{width: 180px;height:auto;display: block;}

</style>

$(function(){

waterfall();

//改變窗口大小時，重新排列

$(window).resize(function(){

waterfall();

})

//如果數(shù)據(jù)不夠，沒出現(xiàn)滾動條，自動加載數(shù)據(jù)

var time=setInterval(function(){

if(checkscrollside()){

addDate();//插入數(shù)據(jù)

waterfall();//加載完數(shù)據(jù)從新排列

}else{

clearInterval(time);

$(window).scroll(function(){

if(checkscrollside()){

addDate();

waterfall();

};

})

}

},1000)

})

// 數(shù)據(jù)插入

function addDate(){

var dataInt=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];//模擬數(shù)據(jù)，也可以是對象

var oParent = $('#content');

for(var i=0;i<dataInt.length;i++){//循環(huán)插入數(shù)據(jù)

oParent.append('<div class="box"><img src="./img/'+dataInt[i]+'" alt=""></div>');

}

//主函數(shù)

function waterfall(){

var arrBox=$('#content').children('.box');// box對象

var iBoxW=arrBox.eq(0).innerWidth();// 獲取瀑布流塊的寬度,注意width(),跟innerWidth()的區(qū)別

var num=Math.floor($(window).width()/iBoxW);//計算窗口能容納幾列

$('#content').css('width',iBoxW*num);//設(shè)置父級寬度

var arrBoxH=[];//數(shù)組，用于存儲每列中的所有塊框相加的高度

for(var i=0;i<arrBox.length;i++){//遍歷數(shù)組瀑布流塊

var boxH=arrBox.eq(i).innerHeight();//獲取當(dāng)前塊的高度

if(i<num){

arrBox.eq(i).attr('style','');//防止用戶改變窗口大小，到時樣式出錯

arrBoxH[i]=boxH; //第一行中的num個塊box 先添加進數(shù)組arrBoxH

}else{

var minH=Math.min.apply(null,arrBoxH);//獲取數(shù)組arrBoxH中的最小值minH

var minHIndex=$.inArray(minH,arrBoxH);//使用jquery提供的工具

arrBox.eq(i).css({'position':'absolute','top':minH,'left':minHIndex*iBoxW});//設(shè)置定位

arrBoxH[minHIndex]+=arrBox.eq(i).innerHeight();//添加后，更新最小列高

}

// 判斷滾動條是否到底部

function checkscrollside(){

var arrBox=$('#content').children('.box');

//獲取最后一個瀑布流塊的高度：距離網(wǎng)頁頂部(實現(xiàn)未滾到底就開始加載)

var lastBoxH=arrBox.eq(arrBox.length-1).offset().top;

var scrollTop=$(window).scrollTop()//獲取滾動條卷走的高度

var documentH=$(window).height();;//顯示頁面文檔的高

return (lastBoxH<scrollTop+documentH)?true:false;//到達指定高度后返回true，觸發(fā)waterfall()函數(shù)

}

</script>

</head>

<body>

</div>

</body>

</html>

大致思路

1.先讓第一行的浮動

2.計算第一行的每個塊的高度

3.遍歷第一行之后的每一個塊，逐個放在最小高度的下面

4.加載數(shù)據(jù)插入最后，再重新計算

注意點

a.原生js

1.定義了getClassObj()函數(shù)用于獲取class類的對象，方便調(diào)用?？紤]了兼容性 getElementsByClassName

2.定義了getminHIndex()函數(shù)用戶獲取最小值的索引

3.設(shè)置塊與塊之間的距離最好用padding，這樣的話offsetHeight可以直接獲取得到高度。如果設(shè)置margin則得多加個外邊距的距離

4.代碼中設(shè)置了定時器加載數(shù)據(jù)，其實可以省略，只要保證第一次加載的數(shù)據(jù)能滿屏就可以。如果沒出現(xiàn)滾動條的話onscroll事件是不會執(zhí)行到的。也就沒辦法加載數(shù)據(jù)了

5.代碼中的計算寬度也可以修改，設(shè)計的頁面是定寬的瀑布流的話。這里主要是做了響應(yīng)式的處理

var arrBox=getClassObj(parentID,childClass);// getClassObj()獲取子class的數(shù)組

var iBoxW=arrBox[0].offsetWidth;// 獲取瀑布流塊的寬度

var num=Math.floor(document.documentElement.clientWidth/iBoxW);//計算窗口能容納幾列

oParent.style.width=iBoxW*num+'px';//設(shè)置父級寬度

6.每設(shè)置一塊位移，都要在列高的數(shù)組上增加數(shù)值，防止塊重疊

arrBox[i].style.position='absolute';//設(shè)置絕對位移

arrBox[i].style.top=minH+'px';

arrBox[i].style.left=minHIndex*iBoxW+'px';//也可以直接獲取arrBox[minHIndex].offsetLeft

arrBoxH[minHIndex]+=arrBox[i].offsetHeight;//添加后，更新最小列高

b.jquery

1.思路是跟js一樣的，只是jquery封裝了很多方法，讓我們簡便的就實現(xiàn)了

2.注意width(),跟innerWidth()的區(qū)別。前者只能獲取寬度值（不包括補白padding）

css3版本

<!DOCTYPE html>

<head>

<style>

*{margin:0;padding:0;}

#content{margin:0 auto;position: relative;width:1200px;column-count:6;-moz-column-count:6;-webkit-column-count:6;}

.box{padding:10px;width: 180px;}

.box img{width: 180px;height:auto;display: block;}

</style>

window.onload=function(){

//如果數(shù)據(jù)不夠，沒出現(xiàn)滾動條，自動加載數(shù)據(jù)

var time=setInterval(function(){

if(checkscrollside()){

addDate();//插入數(shù)據(jù)

}else{

clearInterval(time);

window.onscroll=function(){

if(checkscrollside()){

addDate();

};

}

},1000)

}

// 數(shù)據(jù)插入

function addDate(){

var dataInt=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];//模擬數(shù)據(jù)，也可以是對象

var oParent = document.getElementById('content');

for(var i=0;i<dataInt.length;i++){//循環(huán)插入數(shù)據(jù)

var oBox=document.createElement('div');

oBox.className='box';

oParent.appendChild(oBox);

var oImg=document.createElement('img');

oImg.src='./img/'+dataInt[i];

oBox.appendChild(oImg);

}

//獲取子class的數(shù)組

function getClassObj(parentID,childClass){

var oParent=document.getElementById(parentID);

var allChildObj=oParent.getElementsByTagName('*');//獲取父級下的所有子集

var childObj=[];//創(chuàng)建一個數(shù)組用于收集子元素

for (var i=0;i<allChildObj.length;i++) {//遍歷子元素、判斷類別、壓入數(shù)組

if (allChildObj[i].className==childClass){

childObj.push(allChildObj[i]);

}

};

return childObj;

}

// 判斷滾動條是否到底部

function checkscrollside(){

var arrBox=getClassObj("content",'box');

//獲取最后一個瀑布流塊的高度：距離網(wǎng)頁頂部(實現(xiàn)未滾到底就開始加載)

var lastBoxH=arrBox[arrBox.length-1].offsetTop;

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//獲取滾動條卷走的高度

var documentH=document.documentElement.clientHeight;//顯示頁面文檔的高

return (lastBoxH<scrollTop+documentH)?true:false;//到達指定高度后返回true，觸發(fā)waterfall()函數(shù)

}

</script>

</head>

<body>

</div>

</body>

</html>

注意點

1.滾動加載還是得另外加js

2.加載的數(shù)據(jù)，是豎向排列的。體驗不是很友好

3.有兼容性問題，Internet Explorer 10 +

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助

更多信息請查看網(wǎng)絡(luò)編程

上一篇：原生js仿jquery animate動畫效果

下一篇：jquery計算出left和top,讓一個div水平垂直居中的簡單實例

易賢網(wǎng)手機網(wǎng)站地址：瀑布流的實現(xiàn)方式（原生js+jquery+css3）

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長的行的實現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實例詳解10月30日

Objective-C Json 實例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法10月30日

python生成二維碼的實例詳解10月30日

Python批量更改文件名的實現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實現(xiàn)切換隱藏與顯示同時切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實例代碼10月30日

vue.js todolist實現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實例代碼10月30日

apache 開啟重定向 rewrite的實現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點安裝教程10月23日

易賢網(wǎng)移動網(wǎng)站

2026上岸·考公考編培訓(xùn)報班

報班類型
姓名
手機號
驗證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合