知識點：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>
 

如果有對前端感興趣前端程序員，可以加入我們的web前端技術學習群哦611，256580。會送前端的零基礎教程噢！

javascript制作圖javascript制作圖片無限懶加載，輕松又實用片無限懶加載，輕松又實用