波多野结衣办精品,A欧美亚洲日韩在线观看

當前位置：首頁 > 范文|應用文 > IT技術專欄 > 網絡編程

瀑布流的實現方式（原生js+jquery+css3）

來源：易賢網閱讀：1156 次日期：2016-07-27 16:10:07

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

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

前言

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

原生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');

}

//如果數據不夠，沒出現滾動條，自動加載數據

var time=setInterval(function(){

if(checkscrollside()){

addDate();//插入數據

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

}else{

clearInterval(time);

window.onscroll=function(){

if(checkscrollside()){

addDate();

waterfall('content','box');

};

}

},1000)

}

// 數據插入

function addDate(){

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

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

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

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

oBox.className='box';

oParent.appendChild(oBox);

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

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

oBox.appendChild(oImg);

}

//主函數

function waterfall(parentID,childClass){

var oParent=document.getElementById(parentID);

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

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

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

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

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

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

var boxH=arrBox[i].offsetHeight;//獲取當前塊的高度

if(i<num){

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

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

}else{

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

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

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

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

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

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

}

//獲取子class的數組

function getClassObj(parentID,childClass){

var oParent=document.getElementById(parentID);

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

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

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

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

childObj.push(allChildObj[i]);

}

};

return childObj;

}

//獲取數組最小值的索引

function getminHIndex(arr,minH){

for(var i in arr){

if(arr[i]==minH){

return i;

}

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

function checkscrollside(){

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

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

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

}

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

})

//如果數據不夠，沒出現滾動條，自動加載數據

var time=setInterval(function(){

if(checkscrollside()){

addDate();//插入數據

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

}else{

clearInterval(time);

$(window).scroll(function(){

if(checkscrollside()){

addDate();

waterfall();

};

})

}

},1000)

})

// 數據插入

function addDate(){

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

var oParent = $('#content');

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

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

}

//主函數

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);//設置父級寬度

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

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

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

if(i<num){

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

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

}else{

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

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

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

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

}

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

function checkscrollside(){

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

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

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

}

</script>

</head>

<body>

</div>

</body>

</html>

大致思路

1.先讓第一行的浮動

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

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

4.加載數據插入最后，再重新計算

注意點

a.原生js

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

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

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

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

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

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

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

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

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

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

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

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封裝了很多方法，讓我們簡便的就實現了

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

//如果數據不夠，沒出現滾動條，自動加載數據

var time=setInterval(function(){

if(checkscrollside()){

addDate();//插入數據

}else{

clearInterval(time);

window.onscroll=function(){

if(checkscrollside()){

addDate();

};

}

},1000)

}

// 數據插入

function addDate(){

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

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

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

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的數組

function getClassObj(parentID,childClass){

var oParent=document.getElementById(parentID);

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

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

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

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

childObj.push(allChildObj[i]);

}

};

return childObj;

}

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

function checkscrollside(){

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

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

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

}

</script>

</head>

<body>

</div>

</body>

</html>

注意點

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

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助

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

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

易賢網手機網站地址：瀑布流的實現方式（原生js+jquery+css3）

由于各方面情況的不斷調整與變化，易賢網提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關閱讀網絡編程

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

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

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

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

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

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

Python批量更改文件名的實現方法10月30日

解決出現Incorrect integer value的問題10月30日

jQuery實現切換隱藏與顯示同時切換圖標功能10月30日

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

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

vue.js todolist實現代碼10月30日

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

apache 開啟重定向 rewrite的實現方法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日

易賢網移動網站

2025國考·省考課程試聽報名

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