无限滚动图片懒加载-Infinite-Scroll-Img-笔记学习

CSDN话题挑战赛第2期
参赛话题：学习笔记

我是Sam9029，一个前端

**‍‍恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！**

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

---

---

• 今天完成 了 无限图片 滚动特效
• 此文介绍其 思路

为什么做这个

我平常，闲来无事 喜欢 在某一个 网站 上冲浪‍

兄弟我也就不藏着掖着了，就是 pexels 一个高清的精美图片分享网站

平时也没啥爱好，上这个网站，来忘记烦恼

看些啥呢，搜索关键词也就 美女 大美女 hot girls super hot girls 这几个次轮换的来

但是啊, 这是个外国网站，加载网速很不得劲

每次手麻了，滚鼠标滚轮都滚嘛了，图片依旧没有加载出来

这让我很苦恼啊

你能理解吗? 这是个无限滚动加载图片得欣赏图片得模式

你都吧网页卷曲了很多了，退回去顶部，图片还是没有加载出来，诶

所以根据，展示得原理 我觉得自己写了一个简易版得吧

网站用不起得时候，好歹本地也有一个可以解解愁

所以啊，这就是个无限滚动懒加载图片的 simple demo

效果源码

Infinite-Scroll-Img - 码上掘金 (juejin.cn)

需求介绍

界面设计

小小demo ，就不讲什么界面设计了吧

写个展示无限滚动的区域大盒子，里面装包裹图片的小盒子

逻辑设计

• 在效果图上，可以看到每一张图片都有不一样的长度（但是宽度是一样的）
  • 采用 div>ul 结构
  • ul 采用flex布局，装图片（定宽不定长）
  • 对ul中最后一张图片使用getBoundingClientRect() API 识辨 图片位置信息
  • 对div使用 scroll 事件 触发懒加载函数
    

图片选材

• 这才是这个项目的核心,也是它存在的意义
• 所以 我选择了 收藏已久 的精品图片集

写代码

代码什么的，有了需求，分分钟就写完了啦，就不讲啰

效果展示

待改进

• 实现 宽高 都完全适配 图片,不在定宽

以上待改进-暂无截至日期

完

好了，今天的就是这些啦，没有啰

---

我是Sam9029，一个前端

文章若有错误，敬请指正

**‍‍恭喜你，都看到这了，求收藏，求评论，求一个大大的赞！不过分吧**

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

---