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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hightopo

基于 HTML5 Canvas 实现的文字动画特效

5152
来自专栏angularejs学习篇

JQuery中的动画

  这两种方法是jQuery动画的最基本方法。当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用h...

793
来自专栏阮一峰的网络日志

jQuery设计思想

jQuery是目前使用最广泛的javascript函数库。 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQue...

5436
来自专栏九彩拼盘的叨叨叨

那些 CSS 的设计失误(译)

CSS Working Group 写的 Incomplete List of Mistakes in the Design of CSS 。译的不好,请见谅。

851
来自专栏Windows Community

Windows Phone 8.1 新特性 - 控件之列表选择控件

本篇我们来介绍Windows Phone 8.1 新特性中的列表选择控件。 在Windows Phone 8 时代,大家都会使用 LongListSelecto...

3449
来自专栏C/C++基础

web前端开发初学者十问集锦(3)

我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。但是前提是需要对其父元素显示设置宽度和高度,否则无效。

942
来自专栏deepcc

css实现强制不换行/自动换行/强制换行

4328
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.2 HTML标签简介

HTML(HyperText Mark-up Language)是由HTML标签嵌套和组合的描述性文本,HTML标签可以描述文本(p,div等)、表格(tabl...

1252
来自专栏Android中高级开发

深入分析Android动画(一)

  View动画顾名思义其作用对象为View,包含平移、缩放、旋转、透明,这四类变化分别对应着Animation的子类TranlateAnimation、Sca...

1154
来自专栏Golang语言社区

[Go 语言社区]服务器读取配置文件只-json数据

package main // 导入需要的库 import ( "encoding/json" "fmt" ) // 结构体定义 type ...

4076

扫码关注云+社区

领取腾讯云代金券