css简单实现瀑布流

原创已于 2023-04-20 18:03:14 修改 · 715 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

于 2023-04-20 18:00:56 首次发布

该代码示例展示了如何在Vue.js中创建一个包含两列的网格系统，使用v-for指令遍历数据并响应式地显示元素。点击元素时触发clickItem方法，显示所点击的内容。同时，利用CSS的column-count和column-gap属性进行列布局，break-inside:avoid策略确保内容不被断开。

<template>
  <div class="box">
    <div class="grid-box">
      <div class="grid-item" v-for="item in 10" :key="item">
        <div v-for="ele in item" :key="ele" @click="clickItem(ele)">
          {{ ele }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    clickItem(item) {
      alert(item);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 6000px;
  width: 100%;
  background-color: aliceblue;
  margin: auto;
  overflow: auto;
}
.grid-box {
  column-count: 2;
  column-gap: 10px;
}
.grid-item {
  background-color: aquamarine;
  margin-bottom: 10px;
  break-inside: avoid;
  div {
    line-height: 30px;
  }
}
</style>

column-count属性指定某个元素应分为的列数。
column-gap 属性指定的列之间的差距。
其中重要的是这两个属性,然后一般会配合
break-inside: avoid
通过使用 break-inside，您可以告知浏览器在图像、代码片段、表格以及列表内部避免中断。 (可以简单的理解为避免一个内容换行)
在这里插入图片描述