瀑布流图片展示 {#%E7%80%91%E5%B8%83%E6%B5%81%E5%9B%BE%E7%89%87%E5%B1%95%E7%A4%BA}

一个基于 Vue 3 的响应式瀑布流图片展示组件，支持灯箱预览、自定义布局和图片管理功能。

功能特点 {#%E5%8A%9F%E8%83%BD%E7%89%B9%E7%82%B9}

响应式瀑布流布局
支持灯箱预览
自定义图片布局
加载状态显示
错误处理
键盘导航支持
自定义内容插槽

安装 {#%E5%AE%89%E8%A3%85}

npm install
npm run dev

使用方法 {#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95}

<template>
  <MasonryGallery 
    :images="images"
    :containerWidth="containerWidth"
    :itemsPerRow="itemsPerRow"
    :responsive="responsive"
  />
</template>

配置选项 {#%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9}

图片对象属性 {#%E5%9B%BE%E7%89%87%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7}

url: 图片地址
title: 图片标题
description: 图片描述
tags: 图片标签数组

组件属性 {#%E7%BB%84%E4%BB%B6%E5%B1%9E%E6%80%A7}

containerWidth: 容器宽度
itemsPerRow: 每行显示数量
responsive: 是否启用响应式布局

开发说明 {#%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E}

建议使用 CDN 加速图片加载
图片尺寸建议统一
支持主流浏览器

贡献 {#%E8%B4%A1%E7%8C%AE}

欢迎提交 Issue 和 Pull Request

免责声明 {#%E5%85%8D%E8%B4%A3%E5%A3%B0%E6%98%8E}

本项目仅供学习和参考使用，不得用于任何商业用途。
使用本项目过程中产生的任何直接或间接损失，作者不承担任何责任。
本项目展示的所有图片仅用于演示，其版权归原作者所有。如有侵权，请联系我们删除。
用户在使用本项目时，必须遵守所在国家/地区的相关法律法规。
作者保留对本项目的最终解释权。

开发社区 {#%E5%BC%80%E5%8F%91%E7%A4%BE%E5%8C%BA}

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻： https://cloud.tencent.com/developer/support-plan?invite_code=563edn6y16g

版权 {#%E7%89%88%E6%9D%83}

本项目遵循 MIT 许可证。详细信息请参阅 LICENSE 文件。

开源地址 {#%E5%BC%80%E6%BA%90%E5%9C%B0%E5%9D%80}

https://github.com/acanyo/linuxdoWaterfallFlow

51工具盒子

一个基于 Vue 3 的响应式瀑布流图片展示组件