瀑布流布局多种实现方案

前端瀑布流布局2种方案

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

// 核心代码 columns: 5; // 每行几列 column-gap: 10; // 每个盒子间距

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

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

npm一键装包:

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

点此发表评论
暂无评论