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