调研:
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; //避免断层
}
}
利:
1、简单快速
弊:
1、兼容性一般:column-fill: balance 只在firefox下支持,大部分浏览器只支持默认的column-fill: fill,就只能先渲染完第一列再渲染第二列
2、不适合需要顺序展示的双瀑布流
三、使用absolute布局(最古早)
利:
1、一般不会出错的方案
弊:
1、代码繁琐
参考:
https://juejin.cn/post/6844904142058553358
https://juejin.cn/post/6844904004720263176