瀑布流的實現純CSS實現Jquery實現

時間 2020-07-22

原文原文鏈接

瀑布流的實現

注：本文部分圖片自百度下載，若有侵權，聯繫刪圖。css

首先，選擇幾張圖片佈局到HTML內容中。HTML以下所示。git

 <div class="wrapper">
        <div class="item"><img src="img/1.jpg" height="auto"/></div>
        <div class="item"><img src="img/2.jpg" height="auto"/></div>
        <div class="item"><img src="img/3.jpg" height="auto"/></div>
        <div class="item"><img src="img/4.jpg" height="auto"/></div>
        <div class="item"><img src="img/5.jpg" height="auto"/></div>
        <div class="item"><img src="img/6.jpg" height="auto"/></div>
        <div class="item"><img src="img/7.jpg" height="auto"/></div>
        <div class="item"><img src="img/8.jpg" height="auto"/></div>
        <div class="item"><img src="img/9.jpg" height="auto"/></div>
        <div class="item"><img src="img/10.jpg" height="auto"/></div>
        <div class="item"><img src="img/11.jpg" height="auto"/></div>
        <div class="item"><img src="img/12.jpg" height="auto"/></div>
        <div class="item"><img src="img/13.jpg" height="auto"/></div>
        <div class="item"><img src="img/14.jpg" height="auto"/></div>
        <div class="item"><img src="img/15.jpg" height="auto"/></div>
    </div>

純CSS實現

純CSS實現較爲簡單，主要代碼爲設置列數和間距的兩行。github

/* 將邊距設爲0 */
*{
    margin: 0;
    padding: 0;
    border: none;
}

.wrapper{
    width: auto;
    height: auto;
    position: relative;
    margin: 0 auto;
    /* 設置列數和間距 */
    column-count: 4;
    column-gap: 0;
}
.item{
    position:relative;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 2px;
}

.item img{
    display: block;
    width: 100%;
    cursor: pointer;
    border-radius: 5px;
}
.item img:hover{
    opacity: 0.8;
}

Jquery實現

有bug 的寫法web

定義一個瀑布流方法：數組

 function waterfall(element,child,padding) {
    var child = $(child) || $('.item');
    var wrap = $(element) || $('.wrapper');
    var padding = padding || 25;

    // 寬度，全部元素寬度一致
    var itemW=$(".item").outerWidth(true);

   //  可容納總列數
    var colNum=Math.floor(wrap.outerWidth(true)/child.outerWidth(true));
    console.log(colNum);//3

   //  初始化第一列的top和left值
    var posi=new Array(colNum);

    $.each(posi,(i)=>{
        posi[i]=new Object();
        posi[i].top = padding;
        posi[i].left = padding + i * itemW;

    })
     
    //  每一個元素所處列數
    var eleCol=[];
     //循環圖片列表
    child.each(function (i) {
        
        if ((i+1)% colNum == 0) {
            eleCol[i] = colNum;
        }else{
            eleCol[i] = (i+1) % colNum;
        }
        var sub = eleCol[i]-1;
        var top = posi[sub].top+'px';
        var left = posi[sub].left+'px';
       //  設置每一個元素的位置
        $(this).css({"position":"absolute","top" :top,"left" : left});
       //  每遍歷完一次，重置top值
       posi[sub].top += $(this).outerHeight(true);

    })
}

該方法原理圖如圖所示：app

這是按照順序，根據上行圖片大小對定位加以調整的方式佈局的。佈局

可是，這種方法會形成空行。如圖：this

這是因爲第一列某張圖片過於大的緣故。spa

所以，在作瀑布流時，應該根據已佈局好的元素的高度進行剩餘元素的佈局。就是說，好比第一行元素已經佈局完成，第二行元素應該先選擇第一行元素中，高度最小的那個元素所在列進行插入。這樣，才能保證不會出現某一列太長或者某一列太短的現象。code

根據以上分析，咱們獲得，實現瀑布流的核心實際上是，找出圖片高度最小的一列，並在此插入圖片。

改進後的瀑布流方法：

function waterfall(element,child) {
    var child = $(child) || $('.item');
    var wrap = $(element) || $('.wrapper');

    // 寬度，全部元素寬度一致
    var itemW=$(".item").outerWidth(true);

   //  可容納總列數
    var colNum=Math.floor(wrap.outerWidth(true)/child.outerWidth(true));
    console.log(colNum);//3

    
    // 定義列高度數組並初始化
    var itemH = new Array(colNum);
    $.each(itemH,(i)=>{
        itemH[i]=0;
    })


     //循環圖片列表
    child.each(function (i) {  
        // 定義最小高度和對應的index並初始化
        var minHeight = itemH[0];
        var minIndex = 0;
        console.log("最初最小高度爲："+minHeight+"下標爲："+minIndex);

        // 存儲本次循環對象的高度
        var thisH = $(this).outerHeight(true);

        $.each(itemH,(i)=>{
            if (itemH[i] < minHeight) {
                minHeight = itemH[i];
                minIndex = i;
            }
            console.log("比較後最小高度爲："+minHeight+"下標爲："+minIndex);
        })
 

        var sub = minIndex;
        var top = minHeight;
        var left = minIndex * itemW;
       //  設置每一個元素的位置
        $(this).css({"position":"absolute","top" :top,"left" : left});
       //  每遍歷完一次，重置列高度值
       itemH[sub] += thisH;
       console.log("itemH值："+itemH[sub]);

    })
}