瀑布流
2023-06-28 09:59:36
flex
对父容器设置弹性盒后，因为瀑布流是多行的所以还要flex-wrap设置wrap，并且flex-direction还要设置为column。最关键的是一定要设置一个高度。当然在其子元素用百分比设定要显示几列。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<div flex="~ wrap col" h-800px>
<div v-for="item in 20">
<div
:h="item % 3 === 0 ? '150px' : '70px'"
w="calc(100% / 3)"
border="1px solid"
fcc
m2
>
{{ item }}
</div>
</div>
</div>
</template>column属性
column属性可以指定容器下元素列的宽度和数量
column-count：指定列数
column-gap：列之间的差距
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<div class="wrapper">
<div v-for="item in 20">
<div
:h="item % 3 === 0 ? '150px' : '70px'"
w-200px
border="1px solid"
fcc
m2
>
{{ item }}
</div>
</div>
</div>
</template>
<style scoped>
.wrapper {
column-count: 3;
column-gap: 10px;
width: 660px;
}
</style>此方案实现比较简单，只需加几行代码，但是兼容性不太好，并且元素位置排列无法控制，只能是从上到下从左到右依次排布。