JS模板

<div class="waterfall">
  <div class="item" v-for="(item,index) in list">
    <img :src="item.storyImg"/>
    <div class="introduce">
      <div class="item-name multi2">
        {{item.title}}
      </div>
      <div class="like-number" style="text-align: right">
    <span v-if="item.isLike" style="color: #F82222">
      <van-icon name="like" @click="like(item)"/>
      <span style="color: #666666">{{item.likeNum}}</span>
    </span>
        <span v-else>
      <van-icon name="like-o" @click="like(item)"/>
      <span style="color: #666666">{{item.likeNum}}</span>
    </span>
      </div>
    </div>
  </div>
</div>

css

.waterfall {
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari && Chrome */
  column-count: 2; /* 将 div 元素中的文本分为2列，并规定列间1rem像素的间隔。 */
  -moz-column-gap: 5px;
  -webkit-column-gap: 5px;
  column-gap: 5px;
}

.item {
  margin: 0 0 5px 0;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid; /*break-inside: avoid; 避免元素内部断行并产生新列*/
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  img{
    width: 100%;
  }
}

单纯css，异步获取数据的时候，每次都会重新布局。
JS重组数据，分成两列

 this.dataList.push(...res.data.list)
 this.leftList = []； 
 this.rightList = [];
for (let i = 0; i < this.dataList.length; i++) { 
if (i % 2 == 0) {
this.leftList.push(this.dataList[i]) 
} else {
this.rightList.push(this.dataList[i])
 }
}

  <div class="lwrap">
              <ul class="list-left">
                <li @click="" v-for="item of leftList" :key="item.storyId" @click="goDetail(item)">
                  <div class="media-box">
                    <img
                      class="articleImg"
                      v-lazy="item.ulaCover"
                      alt
                    />
                    <img
                      class="player"
                      src="@/assets/imgs/home/player.png"
                      alt
                    />
                  </div>
                  <div class="text multi2">{{item.ulaTitle}}</div>
                </li>
              </ul>
              <ul class="list-left">
                <li @click="" v-for="item of rightList" :key="item.storyId" @click="goDetail(item)">
                  <div class="media-box">
                    <img
                      class="articleImg"
                      v-lazy="item.ulaCover"
                      alt
                    />
                    <img
                      class="player"
                      src="@/assets/imgs/home/player.png"
                      alt
                    />
                  </div>
                  <div class="text multi2">{{item.ulaTitle}}</div>
                </li>
              </ul>
            </div>

  .lwrap {
        display: flex;
        height: 100%;

        .list-left {
          width: 175px;

          li {
            width: 100%;
            background: #ffffff;
            box-shadow: 0px 0px 8px 0px rgba(215, 215, 215, 0.34);
            border-radius: 5px;
            margin-bottom: 10px;
            display: block;
            padding: 5px;

            .media-box {
              position: relative;

              .articleImg {
                border-radius: 4px;
                width: 100%;
              }

              .player {
                width: 22px;
                height: 22px;
                position: absolute;
                top: 11px;
                right: 10px;
              }
            }

            .text {
              margin: 10px 0;
              font-size: 15px;
              color: #333;
              line-height: 22px;
            }

            .dis-like {
              font-size: 13px;
              margin-bottom: 14px;
              color: #7f7f7f;

              .left {
                img {
                  width: 20px;
                  height: 20px;
                  margin-right: 5px;
                  border-radius: 100%;
                }
              }

              .right {
                font-size: 12px;
                align-items: flex-start;

                i {
                  color: #6f6f6f;
                  font-size: 13px;
                  margin-right: 3px;
                }
              }
            }
          }
        }

        .list-left:first-child {
          margin-right: 9px;
        }
      }