JavaScriptL如何實現瀑布流布局

這篇“JavaScriptL如何實現瀑布流布局”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JavaScriptL如何實現瀑布流布局”文章吧。

　　一、經典套路：JavaScript+絕對定位

　　HTML結構：

　　<divid="main">

　　...<divclass="box">

　　<divclass="wrapper">

　　<divclass="pic"><imgsrc=""/></div>

　　<divclass="text">簡單介紹</div>

　　</div>

　　</div>

　　...</div>

　　整個瀑布流區域用一個<divid="main">作為父容器

　　瀑布流中的每個數據塊用.box作為基本布局，.wrapper呈現樣式和實際內容

　　CSS樣式：

　　*{margin:0;padding:0;}html,body{width:100%;height:100%;background-color:#EDEDED;}#main{

　　position:relative;

　　width:1280px;/*限定父容器的寬度*/

　　margin:0auto;

　　}.box{

　　position:absolute;

　　padding:7px;/*不建議使用margin*/

　　box-sizing:border-box;

　　width:256px;/*限定數據塊的寬度*/}.wrapper{

　　padding:5px;

　　background-color:#fff;

　　border:1pxsolid#e4e4e4;

　　box-shadow:01px5pxrgba(0,0,0,.2);

　　}.pic{

　　font-size:0;/*消除行內元素的間隙*/}.picimg{

　　width:100%;

　　height:auto;

　　}.text{

　　color:#999;

　　background:#FAFAFA;

　　font-size:14px;

　　padding-top:5px;

　　}

　　在.box中設置了padding是為了留出視覺上的間距

　　之所以不使用margin，是因為后面會使用js獲取元素的offsetWidth和offsetHeight

　　而這兩個屬性值是不計算margin的

　　JavaScript：

　　window.onload=function(){

　　waterFall('main','box')

　　}

　　functionwaterFall(main,box){varmain=document.getElementById(main);varboxs=main.getElementsByClassName(box);varboxWidth=boxs[0].offsetWidth;//獲取每個數據塊的寬度

　　varmainWidh=main.offsetWidth;//獲取主容器的寬度

　　varcols=Math.floor(mainWidh/boxWidth);//計算列數

　　varheightArr=[];//定義一個存放top值的數組

　　for(vari=0;i<boxs.length;i++){varboxHeight=boxs[i].offsetHeight;if(i<cols){//第一行heightArr.push(boxs[i].offsetHeight);

　　boxs[i].style.top='0px';

　　boxs[i].style.left=i*boxWidth+'px';

　　}else{//求出最矮盒子的高度

　　varminBoxHeight=Math.min.apply(this,heightArr);

　　//求出最矮盒子的索引

　　varminBoxIndex=getIndex(minBoxHeight,heightArr);

　　boxs[i].style.top=minBoxHeight+'px';//頂部間距即最矮盒子的高度

　　boxs[i].style.left=minBoxIndex*boxWidth+'px';

　　//關鍵:更新最矮盒子的高度

　　heightArr[minBoxIndex]+=boxHeight;

　　}

　　}

　　}

　　functiongetIndex(val,arr){for(variinarr){if(val==arr[i]){returni;

　　}

　　}

　　}

　　這種方案一開始給.box設置了position:absolute;

　　所以在打開頁面的時候，如果頁面性能較差，可能會出現所有數據塊堆疊在一起的情況

　　可以將.box的position:absolute替換為float:left，然后在js添加定位樣式的時候，再補上position:absolute，視覺上會有所改觀

　　二、純CSS3實現瀑布流

　　CSS3中新增了一個屬性column，可以通過規定列數column-count，讓瀏覽器自適應布局

　　只需要刪除上面的JavaScript部分，然后修改#main和.box：

　　#main{

　　width:1280px;

　　margin:0auto;

　　-webkit-column-count:5;

　　column-count:5;

　　-webkit-column-gap:0;

　　column-gap:0;

　　}.box{

　　padding:7px;

　　box-sizing:border-box;

　　width:256px;

　　}

　　但通過這種方式實現的瀑布流，實際上是按照縱向排列的，而之前的經典方案是按照橫向排列的

　　作為一個CSS3的新屬性，只有IE10及以上的瀏覽器才支持column

以上就是關于“JavaScriptL如何實現瀑布流布局”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。