Vue瀑布流插件的使用示例

前端之家收集整理的这篇文章主要介绍了Vue瀑布流插件的使用示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我自己写的一个的Vue瀑布流插件,列数自适应,不用设置每个卡片的高度。@H_403_1@

测试页面:Page.vue @H_403_1@

模板页面:WaterFollow.vue 和 WFColumn.vue@H_403_1@

在Page.vue中,修改itemW的值,设置每列的最小宽度。例如:itemW="200"(意为200px)。list为数组。高度不用设置,:style="{height:item+'px'}"是我为了创造卡片高度加上去的,不加就显示卡片的原来大小。@H_403_1@

经测试,created加载数据正常,mounted加载、更新数据正常。@H_403_1@

Page.vue@H_403_1@

Box" :style="{height:item+'px'}">{{item}}-{{index}}

<style scoped lang="scss">
.container{
width: 100%;
background: gray;
.my-Box{
width: 200px;
background: #000;
margin-bottom: 20px;
color: #fff;
}
}
@H_301_24@

WFColumn.vue@H_403_1@

<style scoped lang="scss">
.wf-container{
width: 100%;
display: flex;
.wf-column{
flex: 1;
}
}
@H_301_24@

WaterFollow.vue@H_403_1@