简单html、css实现瀑布流

看网上的大牛的瀑布流实现真的头都大，嫌麻烦，偶发现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
        }
    }
}