瀑布流3種佈局方案 一、使用flex佈局（最妥當） 二、使用column（最先進——純css） 三、使用absolute佈局（最古早）

調研：
1、蘑菇街/堆糖/花瓣：absolute
2、手淘：flex，但不算瀑布流，每個card高度一樣

一、使用flex佈局（最妥當）

核心：

1、div分兩列
2、遍歷數據分兩組
3、每次渲染完，記錄height，判斷左右列height高度，再決定遍歷的時每個數據往哪丟

<div>
    <div class="left-col">
        <ul>...</ul>
    </div>
    <div class="right-col">
        <ul>...</ul>
    </div>
</div>

.masonry {
  padding: pxTorem(6px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .column {
    width: pxTorem(198px);
    display: flex;
    flex-direction: column;
    &>.item{
      padding-bottom: pxTorem(6px);
    }
  }
}

......
divideData () {
  const dataScroll = JSON.parse(JSON.stringify(this.scrollData))
  let data1 = []
  let data2 = []
  let leftHeight = 0
  let rightHeight = 0
  if (dataScroll && dataScroll.length > 0) {
    dataScroll.map((item, index) => {
      if (leftHeight == rightHeight || leftHeight < rightHeight) {
        leftHeight += item.picHeight
        data1.push({
          renderIndex: index + 1,
          ...item
        })
      } else {
        rightHeight += item.picHeight
        data2.push({
          renderIndex: index + 1,
          ...item
        })
      }
    })
  }
  this.data1 = JSON.parse(JSON.stringify(data1))
  this.data2 = JSON.parse(JSON.stringify(data2))
},

---

二、使用column（最先進——純css）

1、核心

multi-column實現瀑布流主要依賴以下幾個屬性：
column-count: 設置共有幾列
column-width: 設置每列寬度，列數由總寬度與每列寬度計算得出
column-gap: 設置列與列之間的間距

2、避免斷層

1）表現：
最後一個元素的文本內容被自動斷開，一部分在當前列尾，一部分在下一列的列頭
2）原因：
multi-column佈局會將其內的元素自動進行流動和平衡，儘可能保證每列的高度趨於相同，所以會將其內的文本階段分佈在兩列內
3）解決：
給每個item設置break-inside: avoid;

ul {
  columns: 2; //列數
  column-gap: 6px; //列兼具
  column-fill: aoto; //默認的填充方式
  padding: 0;
  width: 100%;
  font-size: 0;
  li {
    width: 100%;
    height: 100px;
    break-inside: avoid; //避免斷層
  }
}

利：

1、簡單快速

弊：

1、兼容性一般：column-fill: balance 只在firefox下支持，大部分瀏覽器只支持默認的column-fill: fill，就只能先渲染完第一列再渲染第二列
2、不適合需要順序展示的雙瀑布流

---

三、使用absolute佈局（最古早）

function waterfall() {
    // 網頁可見區域的寬度
    var pageWidth = document.body.clientWidth;
    // 各圖片寬度
    var itemWidth = items[0].offsetWidth;
    var columns = 2;//寫死兩列
    // 存儲元素高度的數組（下標表示列數）
    var arr = [];
    for(var i = 0;i < items.length;i++) {
        console.log(i);
        if(i < columns) {
            // 在第一行
            items[i].style.top = 0;
            items[i].style.left = (itemWidth + gap ) *i + 'px';
            arr.push(items[i].offsetHeight);
        } else {            
            // 不在第一行
            var minHeight = arr[0];
            var index = 0;
            for(var j = 0; j < arr.length; j++) {
                //找出最小高度
                if(minHeight > arr[j]) {
                    minHeight = arr[j];
                    index = j;
                }
            }
            items[i].style.top = arr[index] + gap + 'px';
            items[i].style.left = items[index].offsetLeft + 'px';
            //當前元素高度累加到最小列高度
            arr[index] = items[i].offsetHeight + arr[index] +gap;
        }
    }
}

利：

1、一般不會出錯的方案

弊：

1、代碼繁瑣

---

參考：
https://juejin.cn/post/6844904142058553358
https://juejin.cn/post/6844904004720263176