项目功能#

• 提供随机图片重定向服务。

• 支持根据 User-Agent 自动返回适配设备的图片（横屏/竖屏）。

项目地址#

📚 API 使用指南#

项目包含一个 EdgeOne Functions (functions/pic.js)，提供以下 HTTP GET 接口：

✨ 页面特性 (Features)#

•   沉浸式画廊体验:

    *   瀑布流布局: 使用 CSS Multi-column 技术，完美兼容各种比例的横屏与竖屏图片。

    *   无限滚动: 自动感知滚动到底部并加载更多图片，提供流畅的浏览体验。

    *   高级暗色主题: 采用 Glassmorphism（毛玻璃）设计风格，提供电影级的视觉享受。

    *   智能导航: 导航栏随滚动自动隐藏/显示，最大化内容展示区域。

    *   即时筛选: 支持在无刷新情况下切换“全部”、“横屏”、“竖屏”视图。

    *   灯箱模式: 点击图片即可全屏查看高清大图。

📂 项目结构#

1
EdgeOne_PicAPI/
2

3
├── index.html            # 画廊主页 (入口文件)
4
├── assets/
5
│   ├── css/
6
│   │   └── style.css     # 全局样式 & 响应式布局
7
│   └── js/
8
│       └── app.js        # 前端逻辑 (无限加载、混洗、筛选)
9
├── functions/
10
│   └── pic.js            # EdgeOne 边缘函数 (API逻辑)
11
└── ri/                   # 图片资源目录
12
    ├── h/                # 横屏图片 (.webp)
13
    └── v/                # 竖屏图片 (.webp)

🚀 部署 (Deployment)#

本项目专为 Tencent EdgeOne Pages 设计。

1.  将代码推送到 Git 仓库。

2.  在 EdgeOne Pages 控制台新建项目。

3.  关联 Git 仓库。

4.  构建配置:

    *   构建目录 (Build Directory): 保持默认或设置为 / (项目根目录)。

    *   无需特殊的构建命令 (这是一个静态站点)。

5.  点击部署。

🛠 开发 (Development)#

1
npx serve .

注意：#