我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

🦖我是Sam9029，一个前端

Sam9029的掘金主页:SAM9029 的个人主页 - 动态 - 掘金 (juejin.cn)

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

为什么做这个

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

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

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

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

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

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

这让我很苦恼啊

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

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

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

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

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

效果源码

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

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

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

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

以上待改进-无截至日期

没有啰

文章若有错误，敬请指正🙏

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

Sam9029的掘金主页:SAM9029 的个人主页 - 动态 - 掘金 (juejin.cn)