看网上的大牛的瀑布流实现真的头都大，嫌麻烦，偶发现css新出的column-count和break-inside属性就可以轻易实现，下面是实现过程
一、具体实现
1、html
<template
>
<div class
="container">
<div class
="item-box" v-for
="(item,index) in list" :key
="index">{{index+1
}}</div
>
</div
>
</template
>
2、js
<script
>
export default
{
data
(){
list:
[1,2,3,4,5,6,7,8,9,10,11,12,13,14
]
}
}
</script
>
3、css：主要是使用column-count和break-inside属性进行实现，具体如下
<style
>
/* 父容器 */
.container
{
/*分几列*/
column-count: 2
;
-webkit-column-count: 2
; /* 兼容性 */
-moz-column-count: 2
; /* 兼容性 */
/*column-gap: 0
;*/ /*列间距，可以自己根据情况进行设置，如果不设置，那么默认30px*/
}
/* 瀑布流的 子项 */
.item-box
{
break-inside: avoid
;
}
/*下面是随意模拟设置每个项的高度和背景色，这个可以根据喜好来设置*/
.item-box:nth-child
(odd
){
background:
height: 500px
;
}
.item-box:nth-child
(even
){
background: rgba
(189, 139, 139, 0.99
);
height: 300px
;
}
.item-box:nth-child
(3n
){
height: 280px
;
background:
}
.item-box:nth-child
(4n-1
){
height: 150px
;
background:
}
</style
>
二、存在的问题：左边是显示1、2、3、4、5、6、7，右边是8、9、10、11、12、13、14，一般按照习惯（人都是从左往右从上往下浏览页面的），应该是左边 1、3、5、7、9、11、13，右边是 2、4、6、8、10、12、14，所以要通过js进行控制一下
1、html
<template
>
<div class
="container">
<div class
="item-box" v-for
="(item,index) in dealList" :key
="index">{{index+1
}}</div
>
</div
>
</template
>
2、js
export default
{
data
(){
list:
[1,2,3,4,5,6,7,8,9,10,11,12,13,14
]
},
computed:
{
//将list的数据进行处理
dealList
(){
let arr
= [],arr1
= [];
this.list.forEach
(item
=>{
if
(item % 2
== 0
){
arr.push
(item
);
}else
{
arr1.push
(item
);
}
})
let res
= [...arr1,
...arr
]; //
[1,3,5,7,9,11,13,2,4,6,8,10,12,14
]
return res
}
}
}
