无限滚动图片懒加载-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领域博主

---