JavaScript making graphics JavaScript making images infinite lazy loading, easy and practical piece of infinite lazy loading, easy and practical

Knowledge points: For Loop statement, Dom concept, element acquisition, dynamic layout, basic algorithm, node operation, the relationship and difference between JQ and JS, the importance of JS, how to learn JS.

HTML code:

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

CSS code:

        <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 code:

    <script src= "Js/jquery.js" ></script><!--introduce JQ files--<script>//Create an array to save the picture var arr = [//array name {src: "images/1.png"}, {src: "images/2.jpg"}, {SR C: "Images/3.jpg"}, {src: "images/4.jpg"}, {src: "images/5.jpg"}, {src: " Images/6.jpg "}, {src:" images/7.jpg "}, {src:" images/8.jpg "}, {src:" image S/9.jpg "}, {src:" images/10.jpg "}, {src:" images/11.jpg "}, {src:" images/1            2.jpg "}];            Console.log (ARR[0].SRC);                var i = 0;//defines a variable//dynamically generated picture label, added to Li inside function create () {//encapsulates a function to create//create a DIV tag                var odiv = document.createelement ("div"); var oimg = new Image ();//Create a new Picture object//0%12 0/12=0 0 1/12=0 more than 1 2/12=0 more than 2 12/12=1 0 13/12=1 more than 1 oIm G.SRC =arr[i%arr.length].src;//assigns the path of the image inside the array to the IMG oImg.style.cssText = "Opacity:0;transform:scale (0)"; Odiv.appendchild (oimg);//put the picture tag in the DIV//put the div in the height of the smallest li inside GetList ($ ("#box ul Li")). Append (o                DIV); (function (oimg) {setTimeout (function () {OImg.style.cssText = "opacity:1;transfor                    M:scale (1) ";                },100);            }) (OIMG)//immediately execute}//create ();//Call Function//alert (arr.length);                Encapsulates a function to obtain the height of the smallest Li function getList (obj) {var length = obj.length;//Defines a variable that holds the number of columns of Li var h = infinity;//The height of each column can be infinitely high var oli;//define a variable to hold the eligible Li column back out for (Var i=0;i<length; i + +) {//loop to get the height of each column to be compared to an infinity H and if it is less than H adds an EQ (i) to the JQ plug-in that specifically gets an element if ( Obj.eq (i). Height () < h) {h = Obj.eq (i). Height ();                    OLi = Obj.eq (i);            }} return oLi;            }//encapsulates a function to loop dynamically adding multiple images var sum;                function upload () {//self-defined i++;                    if (i<12) {for (; i<12;i++) {Create ();                    }}else{sum = i;                    for (; i<sum+3; i++) {Create ();            }}} upload ();                Determine the height of the scrollbar, and then dynamically add var scrollh = ';//document height var srollt = ';//scrollbar Height $ (function () {                    var _height = $ (window). height ();//Gets the width of the viewable area $ (window). Scroll (function () {//JQ scroll bar event                    SCROLLH = document.body.scrollheight;//document Height srollt = document.body.scrolltop;//scroll bar height              Visible visual area height plus invisible scrollbar height add picture if it's greater than the height of the document      if (_height + srollt + > Scrollh) {upload ();            }                });        }); </script>

If there are front-end programmers interested in front end, you can join our web front-end technology Learning Group Oh 611,256580. 0 Basic tutorials that will send the front end Oh!

JavaScript making graphics JavaScript making images infinite lazy loading, easy and practical piece of infinite lazy loading, easy and practical