div瀑布流解决方案

1、column方式

• 适用于固定n列，宽度均分的场景，不固定高度的场景

<div class="flow">
    <div class="item" :key="1000+i.id" v-for="i in data">
       {{ i.value }}
    </div>
</div>

.flow{
    column-count: 3;
    column-gap: 10px;

    .item{
        break-inside: avoid;
        border: 1px solid red;
    }
}

image.png

2、grid 网格方式

• 比较整齐，适用于知道行、列的瀑布流，

<div class="grid">
    <div class="item" :key="1000+i.id" v-for="i in data">
         {{ i.value }}
    </div>
</div>

.grid{
    display: grid;
    grid-template-rows: 1fr 2fr 1fr; //3行
    grid-template-columns: 1fr 2fr 1fr ; //3列
    column-gap: 5px; //列间距
    grid-auto-rows: 200px;

    .item{
        border: 1px solid green;

        display: flex;
        align-items: center; //上下居中
        justify-content: center; //左右居中

        &:first-child{  //使用伪类选择器进行查看
            grid-row-start:1;
            grid-row-end:3;
        }
    }
}

image.png

3、flex-box方式瀑布流

• 不知道列、行的时候，可以根据需求渲染n列、n行

<div class="flex-box">
      <div class="column">
            <div class="item" :key="1000+i.id" v-for="i in data">
                    {{ i.value }}
           </div>
    </div>
    <div class="column">
           <div class="item" :key="1000+i.id" v-for="i in data1">
                {{ i.value }}
           </div>
    </div>
   <div class="column">
          <div class="item" :key="1000+i.id" v-for="i in data">
                {{ i.value }}
          </div>
    </div>
</div>

.flex-box{
    display: flex;
    flex-direction: row;

    .column{
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 0 6px;

        .item{
            border: 1px solid blue;
            margin-bottom: 10px;
        }
    }
}

image.png

4、flex-wrap横向瀑布流

• 适用于横向瀑布，宽度不固定

<div class="flex-wrap">
       <div class="item" :key="1000+i.id" v-for="i in data">
             <div class="value">
                  {{ i.value }}
              </div>
      </div>
</div>

.flex-wrap{
    display: flex;
    flex-wrap: wrap;

    .item{
        flex-grow: 1;
        min-height: 30px;
        border: 1px solid purple;
        margin: 2px;
        background: #FFEEF7;
    }
}

image.png