瀑布流布局多种实现方案

rex 2023-03-26 17:32:17 Web前端 82

前端瀑布流布局2种方案

1、css方式，对浏览器兼容有要求

// 核心代码

columns: 5; // 每行几列

column-gap: 10; // 每个盒子间距

2、js实现思路：找出第一行中高度最的小盒子，下一行第一个盒子排在其下面，以此类推。

代码：原生js版：water.zip vue版： water.zip

npm一键装包：

npm install water-vue3 // 使用方法请看npm官网说明

个人资料