css实现瀑布流

jquery时代大多使用插件实现瀑布流布局，但现在我们可以直接使用存粹的css来实现。从css3开始出现了column-count与column-gap后，我们便可直接使用此属性来进行布局，其中column-count代表列数，column-gap代表列之间的距离。值得注意的是，当使用column-count时，容器中不只一个元素时，列末尾容器中一部分元素可能会断裂至另一列中，为防止此种情况发生可以使用break-inside: avoid，避免容器断裂成两部分。
各大浏览器支持程度：

实例

步骤

1、给容器属性column-count与column-gap。
2、给容器中项目属性break-inside: avoid。

实现代码

  <div class="wrapper">
    <div class="task-container">
      <!--遍历任务列表-->
      <div v-for="(item, index) in taskData" :key="index" class="tasks">
        <div class="task-div">
          <!--任务标签-->
          <span
            :style="{
              backgroundColor:
                tagColorList[Math.floor(Math.random() * tagColorList.length)],
            }"
            v-for="tag in item.tag"
            :key="tag"
            >{{ tag }}
          </span>
          <img
            v-if="item.img"
            :src="taskImgLis[Math.floor(Math.random() * taskImgLis.length)]"
          />
          <h1>{{ item.tit }}</h1>
          <p>{{ item.con }}</p>
          <a href="#">Detalies</a>
        </div>
      </div>
    </div>
  </div>

.wrapper {
  margin: 5px auto;
  width: 98%;
  height: 99%;
  overflow: auto;
  .task-container {
    margin: 10px auto;
    width: 99%;
    column-count: 4; /*表示分割的列数 */
    column-gap: 0px;/*表示列之间的间隔*/
    .tasks {
      break-inside: avoid; /*防止元素内部断裂成第二列*/
      margin: 0px 20px 30px 20px;
      background-color: #eff6ff;
      border-radius: 10px;
      padding: 10px;
      .task-div {
        span {
          margin: 10px 10px 10px 0px;
          padding: 3px 5px;
          background-color: #ffe5d3;
          border-radius: 5px;
        }
        img {
          margin: 10px auto;
          width: 100%;
          border-radius: 10px;
        }
        p {
          color: #aaa;
          margin: 0px 0px 10px 0px;
        }
        a {
          padding: 10px 0px 0px 0px;
          text-decoration: none;
          color: #4c33e6;
        }
      }
    }
  }
}
.wrapper::-webkit-scrollbar {
  /*滚动条整体*/
  width: 5px;
  height: 5px;
}
.wrapper::-webkit-scrollbar-track {
  /*滑轨*/
  background-color: #ccc;
  border-radius: 30px;
}
.wrapper::-webkit-scrollbar-thumb {
  /*滑块*/
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 30px;
  cursor: pointer;
}