css实现瀑布流

最新推荐文章于 2024-09-09 12:23:47 发布

填了个大空

最新推荐文章于 2024-09-09 12:23:47 发布

阅读量2k

点赞数 1

分类专栏： css vue 文章标签： html css 奥里给干就完了

本文链接：https://blog.csdn.net/weixin_43788115/article/details/107056139

版权

vue 同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

css

14 篇文章 0 订阅

订阅专栏

一行代码实现瀑布流

css 的 column-count 属性，将一个盒子分成 x 列，例如 column-count: 2; ，就是将一个div分成 2 列

但是排列不是按照数组顺序排序，因为分成2列后是按照顺序从上往下排列，会自动计算，第一列按照数组顺序渲染完才接着渲染第二列，无关紧要

<template>
  <div id="demoBox">
    <div class="pbl_box">
      <div class="pbl_box_info" v-for="(v, i) in shopList" :key="i">
        <img :src="v.thumbURL" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
	name: 'demoBox',
	data() {
		return {
			shopList: [] // 数据在下方
		}
	}
}
</script>

<style lang="scss" scoped>
#demoBox {
  width: 100%;
  height: auto;
  background: #F0F1F3;;
  overflow-y: auto;
  position: relative;
  
  .pbl_box {
    column-count: 2;
    padding: 10px;
    
    .pbl_box_info {
      break-inside: avoid;
      box-sizing: border-box;
      margin-bottom: 10px;
      img {
        display: block;
        width: 100%;
      }
    }
  }
}
</style>

其中 .pbl_box_info 中的 break-inside: avoid; 用来避免在元素内部断行并产生新列

页面效果

列之间的距离可以改变

column-gap: 10px;

每两列之间还可以增加分割线，并设置分割线的宽度，样式，颜色

column-rule : width style color;

将 column-count 改成 3 之后效果

下面是列表数据，直接获取的百度图片列表

export default [
  {
    thumbURL:
      "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=25462226,492036088&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3934091791,2495552608&fm=11&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3022418489,1511668722&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3227807662,3599349607&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1731472669,4215674773&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3529867560,1288932876&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=160455671,2126788169&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3544005106,2960177055&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1773247512,1544055606&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331240902,302148632&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2455861341,3099849653&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2797486824,1669366989&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2892951871,781641693&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3418866984,2025474024&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1929504862,3503507339&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1002782512,2142316990&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1771748565,2329834238&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=12680769,758549795&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3013132257,1510003281&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2542227489,666962888&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=592587056,1604436738&fm=11&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2049221826,3660697758&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2814453002,2863530653&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1386207003,2280600453&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1291872971,3064067380&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3527704549,3929081328&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2460933666,3793613644&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1320272459,772040234&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=328389424,2589490932&fm=26&gp=0.jpg"
  },
  {
    thumbURL:
      "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659438510,1718529823&fm=26&gp=0.jpg"
  }
];