瀑布流布局方案

杨肆月

发布于 2021-01-26 16:19:49

1.3K00

代码可运行

文章被收录于专栏：全栈开发之路全栈开发之路

运行总次数：0

代码可运行

调研： 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>

......
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; //避免断层
  }
}