一行代码实现瀑布流

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" } ];