實現瀑布流效果

瀑布流又稱瀑布流式佈局，是比較流行的一種網站頁面佈局方式。視覺表現爲參差不齊的多欄佈局，最早採用此佈局的是網站是 Pinterest，後逐漸在國內流行。

瀑布流效果

 瀑布流效果就是每個盒子等寬不等高，按照一定方式排列在一起的效果

下面來說說實現的原理

1.首先，我們有很多的盒子，這些盒子寬度都是相等的，但高度都是不等（這些盒子都是脫離文檔流的position）。

2.算出你第一排要放多少個盒子 （數量num = 屏幕寬度 / 盒子寬度）

3.把第一排放滿（將他們的高度儲存在一個數組中）

4.這時候可以看出第三個元素是最矮的，這時候找到他的索引，獲取他的高度，距離左邊的最距離，給他下面排上第六個元素，

設置第六個元素的top等於第三個元素的top+第三個元素的高度+間距，距離左邊的距離 = 第三個元素的left，然後更新數組裏第三個元素的值加上第六個元素的高度+間距。然後以此類推，每次都往高度最低的位置放下一個盒子直至最後一個。

所以，瀑布流的原理在於找最矮的元素，然後在其下方添加元素，更新該元素再數組中的高度數值，最後就能做出瀑布流效果了

下面附上源碼

html:

<div class="con">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
</div>

CSS:

.con{
    width: 800px;
    argin:0 auto;
    position: relative;
}
.item{
    width: 120px;
    position: absolute;
}

JavaScript：

//給每個盒子設置隨機的顏色和高度
let itemDom = document.querySelectorAll(".item")
for(let i = 0;i < itemDom.length;i++){
 let color = "rgb("+Math.floor(225*Math.random())+","+Math.floor(225*Math.random())+","+Math.floor(225*Math.random())+")"
     let height = Math.floor(200*Math.random())+100
     itemDom[i].style.background = color
      itemDom[i].style.height = height + "px"
}
//瀑布流效果
function waterfall(){
            // let windowHeight = document.documentElement.clientWidth;//獲取屏幕寬度
            let boxWidth = itemDom[0].clientWidth;//獲取盒子寬度
            let jianju = 10;//設置盒子間距
            let arr = []; //儲存第一列的數據，用來算高度最低的盒子
            //算出列數
            let row = Math.floor(800/boxWidth)
            for(let i = 0;i < itemDom.length;i++){
                if(i < row){
                    //這裏用來儲存第一列的數據（高度）
                    itemDom[i].style.top = 0;
                    itemDom[i].style.left = (boxWidth + jianju) * i + "px"
                    arr.push(itemDom[i].offsetHeight);
                }else{
                    //開始尋找數組中高度最低的數值
                    let minHeight = arr[0],index = 0;
                    for(let j = 0;j < arr.length;j++){
                        if(minHeight>arr[j]){
                            minHeight = arr[j];
                            index = j;
                        }
                    }
                    itemDom[i].style.top = arr[index] + jianju + "px";
                    itemDom[i].style.left = itemDom[index].offsetLeft + "px";
                    arr[index] = arr[index] + itemDom[i].offsetHeight + jianju;
                }
            }
        }
waterfall()
window.οnresize=function(){
    waterfall()
}

謝謝觀看