AnimatedGallery：一键搭建高颜值瀑布流相册，将你的照片文件夹转换成漂亮的在线相册，采用瀑布流布局，自动压缩图
还在为照片展示发愁？想拥有一个美观又好用的在线相册？今天就给大家推荐一个开源神器——AnimatedGallery，让你轻松搭建高颜值瀑布流相册，无论在手机还是电脑上都能完美呈现！告别杂乱无章的图片堆叠，让你的照片瞬间高大上！
一、AnimatedGallery 是什么
AnimatedGallery 是一个开源的、基于 JavaScript 的静态图片库生成器。它能将你指定的图片文件夹转换成一个漂亮的在线相册，采用现代的瀑布流布局，并自动进行图片压缩和优化，保证加载速度的同时，也保留了图片的高质量。最重要的是，它非常易于使用，即使你没有任何编程经验，也能轻松上手！
二、功能特征
-
瀑布流布局，颜值爆表: 告别传统的图片列表，AnimatedGallery 采用瀑布流布局，让你的照片展示更具视觉冲击力，瞬间提升格调。
-
响应式设计，完美适配: 无论是在电脑、平板还是手机上浏览，AnimatedGallery 都能完美适配，提供最佳的浏览体验。
-
图片压缩，速度飞快: 内置图片压缩功能，自动优化图片大小，保证加载速度的同时，也最大程度地保留了图片质量。
-
BlurHash 占位图，优雅加载: 使用 BlurHash 技术生成图片占位图，在图片加载完成之前显示模糊的预览效果，避免空白页面的尴尬，提升用户体验。
-
懒加载技术，性能更佳: 采用懒加载技术，只有当图片出现在视窗内时才会加载，进一步提升页面加载速度和性能。
-
简单易用，小白也能上手: 只需将照片放入指定文件夹，运行几条简单的命令，即可生成在线相册，无需任何编程经验。
-
开源免费，自由定制: AnimatedGallery 是一个完全开源的项目，你可以根据自己的需求进行修改和定制。
三、操作指南
- 克隆项目: 打开你的终端，输入以下命令克隆项目到本地：
git clone https://github.com/SimonAKing/AnimatedGallery.git
- 安装依赖: 进入项目目录，安装所需的依赖包：
cd AnimatedGallery
npm install
-
添加照片: 将你的照片放入项目根目录下的 photos 文件夹。
-
本地预览: 运行以下命令，即可在本地预览你的相册：
npm run dev
- 构建部署: 运行以下命令，生成最终的静态文件：
npm run build
生成的静态文件位于 public 文件夹中，你可以将这些文件部署到任何静态网站托管服务，例如 GitHub Pages、Vercel、Netlify 等。
四、支持平台
AnimatedGallery 生成的静态网站可以在任何现代浏览器中运行，包括 Chrome、Firefox、Safari、Edge 等，并且完美支持各种设备，包括桌面电脑、平板电脑和手机。
五、产品定价
AnimatedGallery 是一个完全开源免费的项目，你可以免费使用、修改和分发。
六、使用场景
-
个人摄影作品展示: 如果你是一位摄影爱好者，AnimatedGallery 可以帮助你轻松搭建一个个人在线相册，展示你的摄影作品。
-
旅行照片分享: 记录你的旅行点滴，将旅途中的照片制作成精美的在线相册，与朋友和家人分享。
-
产品图片展示: 如果你是一个电商卖家，可以使用 AnimatedGallery 展示你的产品图片，提升用户体验。
-
活动照片记录: 记录各种活动的照片，例如婚礼、生日派对、公司年会等，并制作成在线相册，方便大家浏览和分享。
七、运作模式
AnimatedGallery 使用 Rsbuild 作为构建工具，并结合了多种前端技术，例如 React、BlurHash、懒加载等，最终生成一个高性能、美观的静态网站。
结语
AnimatedGallery 是一款功能强大且易于使用的在线相册生成器，它能帮助你轻松搭建一个高颜值的瀑布流相册，无论是个人使用还是商业用途都非常合适。如果你正在寻找一个简单易用的相册解决方案，不妨试试 AnimatedGallery！
网址：https://github.com/SimonAKing/AnimatedGallery
演示：https://simonaking.com/gallery/
