標籤：
（原生js+jquery+css3）前言項目需求要弄個瀑布流的頁面，用的是waterfall這個外掛程式，感覺還是可以的，項目趕就沒自己的動手寫。最近閑來沒事，就自己寫個。大致思路理清楚，還是挺好實現的...
原生javascript版<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <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> <script> 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++){//迴圈插入資料 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=[];//建立一個數組 用於收集子項目 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，觸發waterfall()函數 } </script></head><body> <div id="content"> <div class="box"><img src="img/0.jpg" ></div> <div class="box"><img src="img/1.jpg" ></div> <div class="box"><img src="img/2.jpg" ></div> <div class="box"><img src="img/3.jpg" ></div> <div class="box"><img src="img/4.jpg" ></div> <div class="box"><img src="img/5.jpg" ></div> <div class="box"><img src="img/6.jpg" ></div> <div class="box"><img src="img/7.jpg" ></div> <div class="box"><img src="img/8.jpg" ></div> <div class="box"><img src="img/9.jpg" ></div> <div class="box"><img src="img/10.jpg" ></div> </div></body></html>
jquery版本
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <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> <script src="js/jquery-1.11.1.min.js"></script> <script> $(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++){//迴圈插入資料 oParent.append(‘<div class="box"><img src="./img/‘+dataInt[i]+‘" ></div>‘); } } //主函數 function waterfall(){ var arrBox=$(‘#content‘).children(‘.box‘);// box對象 var iBoxW=arrBox.eq(0).innerWidth();// 擷取瀑布流塊的寬度,注意width(),跟innerWidth()的區別 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，觸發waterfall()函數 } </script></head><body> <div id="content"> <div class="box"><img src="img/0.jpg" ></div> <div class="box"><img src="img/1.jpg" ></div> <div class="box"><img src="img/2.jpg" ></div> <div class="box"><img src="img/3.jpg" ></div> <div class="box"><img src="img/4.jpg" ></div> <div class="box"><img src="img/5.jpg" ></div> <div class="box"><img src="img/6.jpg" ></div> <div class="box"><img src="img/7.jpg" ></div> <div class="box"><img src="img/8.jpg" ></div> <div class="box"><img src="img/9.jpg" ></div> <div class="box"><img src="img/10.jpg" ></div> </div></body></html>
大致思路
1.先讓第一行的浮動
2.計算第一行的每個塊的高度
3.遍曆第一行之後的每一個塊，逐個放在最小高度的下面
4.載入資料插入最後，再重新計算
注意點a.原生js
1.定義了getClassObj()函數用於擷取class類的對象，方便調用。考慮了相容性 getElementsByClassName
2.定義了getminHIndex()函數使用者擷取最小值的索引
3.設定塊與塊之間的距離最好用padding，這樣的話offsetHeight可以直接擷取得到高度。如果設定margin則得多加個外邊距的距離
4.代碼中設定了定時器載入資料，其實可以省略，只要保證第一次載入的資料能滿屏就可以。如果沒出現捲軸的話onscroll事件是不會執行到的。也就沒辦法載入資料了
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].offsetLeftarrBoxH[minHIndex]+=arrBox[i].offsetHeight;//添加後，更新最小列高
b.jquery
1.思路是跟js一樣的，只是jquery封裝了很多方法，讓我們簡便的就實現了
2.注意width(),跟innerWidth()的區別。前者只能擷取寬度值（不包括補白padding）
css3版本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>瀑布流-css3</title> <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> <script> 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++){//迴圈插入資料 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=[];//建立一個數組 用於收集子項目 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，觸發waterfall()函數 } </script></head><body> <div id="content"> <div class="box"><img src="img/0.jpg" ></div> <div class="box"><img src="img/1.jpg" ></div> <div class="box"><img src="img/2.jpg" ></div> <div class="box"><img src="img/3.jpg" ></div> <div class="box"><img src="img/4.jpg" ></div> <div class="box"><img src="img/5.jpg" ></div> <div class="box"><img src="img/6.jpg" ></div> <div class="box"><img src="img/7.jpg" ></div> <div class="box"><img src="img/8.jpg" ></div> <div class="box"><img src="img/9.jpg" ></div> <div class="box"><img src="img/10.jpg" ></div> </div></body></html>
注意點
1.滾動式載入還是得另外加js
2.載入的資料，是豎向排列的。體驗不是很友好
3.有相容性問題，Internet Explorer 10 +
js+jquery+css3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
