vue3.0瀑布流插件(该仓库没有经过细心测试,建议
kuan-vue-waterfall
该仓库没有经过细心测试,建议选择其他更稳定的库
注意:注意当前分支为 vue3.0 版本,如果使用 2.0,可以切换 vue2 的分支
原理:实现原理是手动获取 slot 的大小,进行了计算瀑布流的位置,如果有图片会等图片 onload 才会显示
优化:如果没有图片或者 slot 中元素设置了内联样式的宽高,可以设置delay=false
,这样体验会好很多
点击 DEMO
安装yarn add kuan-vue-waterfall # or npm i kuan-vue-waterfall 使用
查看 test.vue
import WaterFall from 'kuan-vue-waterfall'
export default {
components: {
WaterFall,
},
}
参数
water-fall
属性
data {Array}
: 数据源列表 [{key: ''}]
width {String|Number}
: 单个卡片的宽度
gap {String|Number}
: 单个卡片之间边距,默认 0
delay {Boolean}
: 是否等待卡片内图片加载完成
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。