vue3实现图片瀑布流展示

最近在研发 AI 副业项目平台，然后自己设计了一个瀑布流组件，可以随意调整展示的列数、懒加载、每页滚动数量、高度、点击效果等。

一、效果

先看看效果如何，如何随意调整 4 列、5 列、6 列、N 列展示。

二、实现方法

现建立 components/waterfall/index.vue 组件

其中 @/utils/waterfall/utils.js 如下

// 用于模拟接口请求
export const getRemoteData = (data = '获取数据', time = 2000) => {return new Promise((resolve) => {setTimeout(() => {console.log(` 模拟获取接口数据 `, data)
            resolve(data)
        }, time)
    })
}

// 获取数组随机项
export const getRandomElement = (arr) => {var randomIndex = Math.floor(Math.random() * arr.length);
    return arr[randomIndex];
}

// 指定范围随机数
export const getRandomNumber = (min, max) => {return Math.floor(Math.random() * (max - min + 1) + min);
}

// 节流
export const throttle = (fn, time) => {
    let timer = null
    return (...args) => {if (!timer) {timer = setTimeout(() => {
                timer = null
                fn.apply(this, args)
            }, time)
        }
    }
}
// 防抖
export const debounce = (fn, time) => {
    let timer = null
    return (...args) => {clearTimeout(timer)
        timer = setTimeout(() => {fn.apply(this, args)
        }, time)
    }
}

调用组件

项目源码和问题交流，可以通过文末名片找到我。