css样式 进行的瀑布流玩法

简单归简单 布局还是需要自己造的 我是创建了n个相同内容 就是换图片
<div class="modulee-content-2">
    <div class="content-list">

      <div class="aaa" v-for="item in lineDataList" :key="item.id" @click="toDetail(item)">
        <div class="list-item">
          <div class="img">
           < img :src="getImgUrl(item.coverPic)"/>
        <span class="distance">
            <cl-icon size="15" name="eye-o" />
            <span>{{ item.hitCardNum }}</span>
          </span>
        </div>
      </div>
      <div class="name">{{item.name}}</div>
      </div>
     
    </div>
  </div>

一、首先需要在你父级容器上添加最重要的两个属性：

column-count: 2;（这个属性指定列数为2）

column-gap：12px;(这个属性指定列间距为12px）

二、这个布局最大的坑在子元素上，子元素会出现内容被截断的情况，这里有三种解决方案

1.子容器添加：height: 100%; overflow: auto;（不存在兼容性问题，没测试过）

2.子容器添加：break-inside: avoid（ios存在兼容性问题，会导致首行对不齐，末行排列错乱等情况）

3.子元素设置：display: inline-block;（亲测有效，并且兼容ios，推荐使用此方法）

以上纯属记录个人踩坑记录，欢迎大佬们提意见，水平有限，如有错误之处，还请多多包涵。

css >>
   .modulee-content-2 {
        padding: 0 20px;

        .content-list {
            // 列与列间的间隙
            column-gap: 10px;
            // 分割的列数
            column-count: 2;
            
            .aaa{
                break-inside: avoid;

                .list-item {   
                position: relative;
                z-index: 1;
                border-radius: 20px;
                padding: 5px;
                // margin-bottom: 50px;
                box-sizing: border-box;
                // 间距控制
                width: 90%;

                
                &::after {
                    content: '';
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    bottom: -10px;
                    background-image: url('/img/index/module-bg-1.png');
                    background-size: 100% 100%;
                    z-index: -2;
                    // display: block;
                }

                &::before {
                    content: '';
                    width: 100%;
                    height:100%;
                    position: absolute;
                    left: 0;
                    bottom: 0px;
                    background-image: url('/img/index/module-bg.png');
                    background-size: 100% 100%;
                    z-index: -1;
                    // display: block;
                }

                .img{                        
                    width: 100%;
                    height: 100%;

                    img{
                        
                    width: 100%;
                    display: block;
                    // height: auto;
                    border-radius: 20px;
                    }
                }
                    
                    // 子父定位
                    .distance {
                        position: absolute;
                        bottom: 30px;
                        right: 20px;

                        color: #fff;
                        font-size: 32px;
                        z-index: 2;
                        text-align: center;
                        text-shadow: 1px 1px 4px #666;

                        .van-icon{
                            vertical-align: middle;
                            margin-right: 8px;
                        }
                        span {
                            vertical-align: middle;
                            font-size: 20px;
                            // display: block;
                            &:nth-child(4){
                                margin: 0 10px;
                                font-weight: 700;
                                vertical-align: middle;
                            }
                        }
                    }
                    
                }
                .name{
                    margin-top:  10px;
                    // height: 50px;
                    // line-height: 60px;
                    // position: absolute;
                    // left: 0;
                    // bottom: -50px;
                }
            }    
                    
        }
    }

思路在这边分析 整体大盒子包裹一下 在里面操作 因为考虑图片外有内容 所以再分两个盒子 （class img多余 可删）

其次就是css样式实现的瀑布流 

content-list 是这个区域的大盒子**

aaa是当前图片和文字的大盒子 break-inside: avoid 处理排班问题必加**

图片区域的操作内容
这边图片后面的效果是通过 伪类操作的

&::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      bottom: -10px;
      background-image: url('');
      background-size: 100% 100%;
      z-index: -2;
     // display: block;
   }

&::before {
      content: '';
      width: 100%;
      height:100%;
      position: absolute;
      left: 0;
      bottom: 0px;
      background-image: url('');
      background-size: 100% 100%;
      z-index: -1;
      // display: block;
    }

里面的图片操作

最后就是 class name 文字问题处理 因为定位导致和上面盒子重叠 
.name{
     margin-top:  10px;
   }