专栏首页编程坑太多javascript图片无限懒加载

javascript图片无限懒加载

知识点:for循环语句,DOM概念,元素获取,动态布局,基本算法,节点操作,JQ与JS的关系与区别,JS的重要性,如何学习JS。

html代码:

    <div id="box"><!--id="自定义的名称" 命名规范(见名知义:用有语义的英文单词)-->
        <ul><!--无序列表标签-->
            <!--img图片四要素:src width height alt(解释说明)-->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

css代码:

    <style>/*css 样式 */
        *{/* 通用选择器:选择到所有的标签元素*/
            margin:0;/*外边距*/
            padding:0;/*内边距*/
        }
        #box{/* # id选择器*/
            width:1000px;
            height:500px;
            /*优秀的开发工程师一定是一个为服务器/cpu考虑的
            background:#963;*/
            margin:auto;
        }
        #box ul li{
            list-style:none;/*去除前面的小黑圆点*/
            width:225px;
            /*height:200px;*/
            background:#fff;
            float:left;/*左浮动:与父元素的左端对齐依次往右端显示,显示不下就换行接着显示*/
            padding:5px;
            margin:5px;
            box-shadow:0 0 5px #333;/*边框阴影:x方向的偏移 y方向偏移 模糊度 颜色*/
        }
        #box ul li img{
             width:225px;
             transition:1s;
        }
    </style>

javascript代码:

<script src="js/jquery.js"></script><!--引入jq文件-->
    <script>
        //创建一个数组来保存图片
        var arr = [//数组名字
            {src : "images/1.png"},
            {src : "images/2.jpg"},
            {src : "images/3.jpg"},
            {src : "images/4.jpg"},
            {src : "images/5.jpg"},
            {src : "images/6.jpg"},
            {src : "images/7.jpg"},
            {src : "images/8.jpg"},
            {src : "images/9.jpg"},
            {src : "images/10.jpg"},
            {src : "images/11.jpg"},
            {src : "images/12.jpg"}
        ];
        //console.log(arr[0].src);
        var i = 0;//定义一个变量
        //动态生成图片标签,添加到Li里面
        function create(){//封装一个函数来创建
            //创建一个div标签
            var oDiv = document.createElement("div");
            var oImg = new Image();//新建一个图片对象
            //0%12 0/12=0 余0 1/12=0余1 2/12=0余2 12/12=1余0 13/12=1余1
            oImg.src = arr[i%arr.length].src;//把数组里面图片的路径赋值给img
            oImg.style.cssText = "opacity:0;transform:scale(0)";
            oDiv.appendChild(oImg);//把图片标签放到div里面
            //把div放到高度最小的li里面
            getList($("#box ul li")).append(oDiv);
            (function(oImg){
                setTimeout(function(){
                    oImg.style.cssText = "opacity:1;transform:scale(1)";
                },100);
            })(oImg)//立马执行
        }
        //create();//调用函数
        //alert(arr.length);
        //封装一个函数来获取高度最小的li
        function getList(obj){
            var length = obj.length;//定义一个变量保存li的列数
            var h = Infinity;//每一列的高度都可以无限高
            var oLi;//定义一个变量来保存符合条件的li列返回出去
            for (var i=0;i<length ;i++ )
            {
                //循环获取每一列的高度来和无限高h作对比 若果小于h加给这个元素添加eq(i)  jq插件里面具体获取某一个元素
                if (obj.eq(i).height() < h)
                {
                    h = obj.eq(i).height();
                    oLi = obj.eq(i);
                }
            }
            return oLi;
        }
        //封装一个函数来循环动态添加多个图片
        var sum;
        function upload(){//自定的
            i++;
            if(i<12){
                for(;i<12;i++){
                    create();
                }
            }else{
                sum = i;
                for (;i<sum+3 ;i++ )
                {
                    create();
                }
            }
        }
        upload();
        //判断滚动条的高度,然后动态添加
        var scrollH = '';//文档高度
        var srollT = '';//滚动条高度
        $(function(){
            var _height = $(window).height();//获取可视区域的高度
            $(window).scroll(function(){//jq滚动条事件
                scrollH = document.body.scrollHeight;//文档高度
                srollT = document.body.scrollTop;//滚动条高度
                //看得见的可视区域高度加上看不见的滚动条高度之和如果大于文档的高度的话就再添加图片
                if(_height + srollT + 50 > scrollH){
                    upload();
                }
            });
        });
    </script>

本文分享自微信公众号 - 编程坑太多(idig88),作者:看更多☞

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 「小程序JAVA实战」小程序的横向视频和页面拦截(59)

    PS:小程序一般的开发思路就是尽量前端能办的少麻烦后端,减少交互。这样用户体验就上去了。

    IT故事会
  • 『中级篇』docker之CI/CD持续集成-gitlab安装(70)

    PS:gitlab安装基本就是这样也不是很复杂,主要是必须更改源,国内的墙太高太宽了。

    IT故事会
  • 『中级篇』docker之CI/CD持续集成-gitlab安装(70)

    PS:gitlab安装基本就是这样也不是很复杂,主要是必须更改源,国内的墙太高太宽了。

    IT故事会
  • hexo的图片和视频显示

    之前一番因为买了阿里云和域名,而且备了案。于是在阿里云上重新部署了博客,同样用的hexo。

    efonfighting
  • dot net core 使用 usb 获得通知读写串口通信LGPL

    首先需要打开 Nuget 安装 CoreCompat.LibUsbDotNet ,这是一个usb连接的库。

    林德熙
  • 只有名字的变量

    命运掌握在自己手中。要么你驾驭生命,要么生命驾驭你,你的心态决定你是坐骑还是骑手! by AI_疯。

    DataScience
  • 博客 | 一文看懂任务型对话中的对话策略学习(DPL)

    前面写了对话系统中的SLU之领域分类和意图识别、槽填充、上下文LU和结构化LU、对话状态追踪(DST)、以及NLG,今天更新任务型对话系统中的DPL。DPL也叫...

    AI研习社
  • 全选

  • math对象,数据类型转换,if else分支

    // var n4 = parseInt(n1 / 10 - n3);  //方法1

    星辰_大海
  • lnmp 添加-列出-删除虚拟主机相关命令

    魏艾斯博客www.vpsss.net

扫码关注云+社区

领取腾讯云代金券