码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 无限滚动图片懒加载-Infinite-Scroll-Img-笔记学习


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

    🦖我是Sam9029,一个前端

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

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


    文章目录

    • 为什么做这个
    • 效果源码
    • 需求介绍
      • 界面设计
      • 逻辑设计
      • 图片选材
    • 写代码
    • 效果展示
    • 待改进
    • 完
    • 🦖我是Sam9029,一个前端


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

    为什么做这个

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

    兄弟我也就不藏着掖着了,就是 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领域博主


  • 相关阅读:
    我选择了MySQL和SpringData JPA!
    Seurat | 强烈建议收藏的单细胞分析标准流程(细胞周期的影响去除)(三)
    经典面试题-Python装饰器
    SpringBoot之yml与properties配置文件格式的区别
    C# pythonnet(1)_传感器数据清洗算法
    前端vue实现讲师新增和修改功能
    java SE 基础
    Nacos注册中心
    京东笔试-校招
    【ACWING】【2】前缀和
  • 原文地址:https://blog.csdn.net/m0_61486963/article/details/126880636
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号