图片瀑布流

本文目标意在实现横向和纵向图片瀑布流；横向采用 Flex布局，纵向则提供Absolute绝对定位 和 Grid布局 两种解决方案；数据上采用真实的接口请求，图片为爬虫爬取后存库；优化上做了懒加载和防抖，减少资源消耗的同时增强用户体验。

演示网址：

纵向瀑布流 - 演示网址

横向瀑布流 - 演示网址

效果图：

tips：图片为爬虫爬取【 来源为 wallhaven.cc 】，过滤大小为200K，实际工作中可存取不同规格的图片，瀑布流时展示小图，预览在加载高清大图。

启动：

前端：yarn start

服务端：node src/bin/www.js（数据库读取的.env文件，大家可自行模拟接口）

说明：

图片为爬虫爬取，部分失败是源站的请求限制，频繁请求会429；

图片过大时，应存储不同尺寸图片，瀑布流时展示小图，预览时展示大图

absolute 方案未作 resize 处理，大家可自行添加（笔者将其用在移动端，将 Grid 方案用在 PC 端）

图片的宽高比是必要的，否则无法在图片加载前呈现良好的效果