本文目标意在实现横向和纵向图片瀑布流；横向采用 Flex布局，纵向则提供Absolute绝对定位 和 Grid布局 两种解决方案；数据上采用真实的接口请求，图片为爬虫爬取后存库；优化上做了懒加载和防抖，减少资源消耗的同时增强用户体验。
演示网址：
效果图：
tips：图片为爬虫爬取【 来源为 wallhaven.cc 】，过滤大小为200K，实际工作中可存取不同规格的图片，瀑布流时展示小图，预览在加载高清大图。
启动：
前端：yarn start
服务端：node src/bin/www.js（数据库读取的.env文件，大家可自行模拟接口）
说明：
-
图片为爬虫爬取，部分失败是源站的请求限制，频繁请求会429；
-
图片过大时，应存储不同尺寸图片，瀑布流时展示小图，预览时展示大图
-
absolute 方案未作 resize 处理，大家可自行添加（笔者将其用在移动端，将 Grid 方案用在 PC 端）
-
图片的宽高比是必要的，否则无法在图片加载前呈现良好的效果