我自己写的一个的Vue瀑布流插件,列数自适应,不用设置每个卡片的高度。
测试页面:Page.vue
模板页面:WaterFollow.vue 和 WFColumn.vue
在Page.vue中,修改itemW的值,设置每列的最小宽度。例如:itemW=“200”(意为200px)。list为数组。高度不用设置,:style="{height:item+‘px’}"是我为了创造卡片高度加上去的,不加就显示卡片的原来大小。
经测试,created加载数据正常,mounted加载、更新数据正常。
Page.vue
<template>
<div class="container">
<w-f-column itemW="200">
<template slot-scope="{columnNum,columnIndex}">
<water-follow :list="list" :columnNum="columnNum" :columnIndex="columnIndex">
<template slot-scope="{item,index}">
<div class="my-box" :style="{height:item+'px'}">{
{item}}-{
{index}}</div>
</template>//前端全栈学习交流圈:866109386
</water-follow&g