瀑布流的實現方式

目錄

（1）css的multi-columns 寫法

(2)flexbox 

(3)js實現瀑布流：實現橫向瀑布流（以上是實現豎向的瀑布流）

---

（1）css的multi-columns 寫法

html：

<div class="box">
          <div class="item">
            <div class="item_content content-lar">1我最大</div>
          </div>
          <div class="item">
            <div class="item_content content-sma">2我最小</div>
          </div>
          <div class="item">
            <div class="item_content content-mid">3我中號</div>
          </div>
          <div class="item">
            <div class="item_content content-sma">4我最小</div>
          </div>
          <div class="item">
            <div class="item_content content-mid">5我中號</div>
          </div>
          <div class="item">
            <div class="item_content content-lar">6我最大</div>
          </div>
          <div class="item">
            <div class="item_content content-sma">7我最小</div>
          </div>
          <div class="item">
            <div class="item_content content-lar">8我最大</div>
          </div>
          <div class="item">
            <div class="item_content content-lar">9我最大</div>
          </div>
          <div class="item">
            <div class="item_content content-sma">10我最小</div>
          </div>
          <div class="item">
            <div class="item_content content-mid">11我中號</div>
          </div>
          <div class="item">
            <div class="item_content content-mid">12我中號</div>
          </div>
          <!-- more items -->
        </div>

css:

box：是瀑布流的容器：在容器裏面column-count（列數） 和 column-gap（列間距）

item：是列表 break-inside:avoid，這是爲了控制文本塊分解成單獨的列，以免項目列表的內容跨列，破壞整體的佈局。

 

.content-sma {
  height: 50px;
}
.content-mid {
  height: 100px;
}
.content-lar {
  height: 150px;
}
.box {
  -moz-column-count: 4; /* Firefox */
  -webkit-column-count: 4; /* Safari 和 Chrome */
  column-count: 4; //設置列數
  -moz-column-gap: 2em;
  -webkit-column-gap: 2em;
  column-gap: 2em; //設置列間距
  width: 80%;
  margin: 2em auto;
}
.item {
  //  padding: 2em;
  border: 1px solid;
  margin-bottom: 2em;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid; //防止單獨成行
  background: #f60;
}

效果：

(2)flexbox 

html同上

css:

.content-sma {
  height: 50px;
}
.content-mid {
  height: 100px;
}
.content-lar {
  height: 150px;
}
.box {
  height: 600px;
  display: flex;
  flex-flow: column wrap;
  width: 80%;
  margin: 2em auto;
}
.item {
  //  padding: 2em;
  border: 1px solid;
  margin: 10px 5px;
  background: #f60;
}

效果：

(3)js實現瀑布流：實現橫向瀑布流（以上是實現豎向的瀑布流）

思路：用相對定位來佈局，

首先根據屏幕和列數，確定單列的寬度

其次算出item與圖片的寬高比

最後計算第一行和其他行的top和left實現

/item的top值：第一行：top爲0
 //            其他行：必須算出圖片寬度在item寬度的縮小比例，與獲取的圖片高度相乘，從而獲得item的高度
 //                   就可以設置每張圖片在瀑布流中每塊item的top值（每一行中最小的item高度，數組查找）
//item的left值：第一行：按照每塊item的寬度值*塊數
 //             其他行：與自身上面一塊的left值相等

//瀑布流效果
//這裏有一個坑（已經修復）：
//因爲是動態加載遠程圖片，在未加載完全無法獲取圖片寬高
//未加載完全就無法設定每一個item(包裹圖片)的top。

//item的top值：第一行：top爲0
//            其他行：必須算出圖片寬度在item寬度的縮小比例，與獲取的圖片高度相乘，從而獲得item的高度
//                   就可以設置每張圖片在瀑布流中每塊item的top值（每一行中最小的item高度，數組查找）
//item的left值：第一行：按照每塊item的寬度值*塊數
//             其他行：與自身上面一塊的left值相等
function waterFall() {
    // 1- 確定圖片的寬度 - 滾動條寬度
    var pageWidth = getClient().width-8;
    var columns = 3; //3列
    var itemWidth = parseInt(pageWidth/columns); //得到item的寬度
    $(".item").width(itemWidth); //設置到item的寬度
    
    var arr = [];

    $(".box.item").each(function(i){
        var height = $(this).find("img").height();
        var width = $(this).find("img").width();
        var bi = itemWidth/width; //獲取縮小的比值
        var boxheight = parseInt(height*bi); //圖片的高度*比值 = item的高度

        if (i < columns) {
            // 2- 確定第一行
            $(this).css({
                top:0,
                left:(itemWidth) * i
            });
            arr.push(boxheight);

        } else {
            // 其他行
            // 3- 找到數組中最小高度  和 它的索引
            var minHeight = arr[0];
            var index = 0;
            for (var j = 0; j < arr.length; j++) {
                if (minHeight > arr[j]) {
                    minHeight = arr[j];
                    index = j;
                }
            }
            // 4- 設置下一行的第一個盒子位置
            // top值就是最小列的高度 
            $(this).css({
                top:arr[index],
                left:$(".box.item").eq(index).css("left")
            });

            // 5- 修改最小列的高度 
            // 最小列的高度 = 當前自己的高度 + 拼接過來的高度
            arr[index] = arr[index] + boxheight;
        }
    });
}


//clientWidth 處理兼容性
function getClient() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
}



 // 頁面尺寸改變時實時觸發
window.onresize = function() {
    //重新定義瀑布流
    waterFall();
};



//初始化
window.onload = function(){
    
    //實現瀑布流
    waterFall();

}

以上參考：https://www.cnblogs.com/ainyi/p/8766281.html

大道同歸vue實現瀑布流或者react或者angular實現瀑布流思想都與此一樣