vue瀑布流

1.column 多行布局实现瀑布流

<template>
  <div class="box">
    <div class="item">
      <img src="../assets/image/3.jpg" alt="" />
    </div>
    <div class="item item2">
      <img src="../assets/image/1.png" alt="" />
    </div>
    <div class="item">
      <img src="../assets/image/2.png" alt="" />
    </div>
    <div class="item">
      <img src="../assets/image/3.jpg" alt="" />
    </div>
    <div class="item item3">
      <img src="../assets/image/2.png" alt="" />
    </div>
    <div class="item item2">
      <img src="../assets/image/1.png" alt="" />
    </div>
    <div class="item">
      <img src="../assets/image/3.jpg" alt="" />

    </div>
    <div class="item">
      <img src="../assets/image/1.png" alt="" />

    </div>
    <div class="item item3">
      <img src="../assets/image/2.png" alt="" />

    </div>
    <div class="item item2">
      <img src="../assets/image/3.jpg" alt="" />

    </div>
    <div class="item">
      <img src="../assets/image/1.png" alt="" />

    </div>
    <div class="item item3">
      <img src="../assets/image/2.png" alt="" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  margin: 10px;
  column-count: 2;
  column-gap: 10px;
}
.item {
  margin-bottom: 10px;
  /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
  break-inside: avoid;
}
.item2 {
  height: 120px;
  border: 1px solid red;
}
.item img {
  width: 100%;
  height: 100%;
}
</style>

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！