看网上的大牛的瀑布流实现真的头都大,嫌麻烦,偶发现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: #ddd;
height: 500px;
}
.item-box:nth-child(even){
background: rgba(189, 139, 139, 0.99);
height: 300px;
}
.item-box:nth-child(3n){
height: 280px;
background: #385dba;
}
.item-box:nth-child(4n-1){
height: 150px;
background: #76c67e;
}
</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
}
}
}