给大家分享一下JS的图片懒加载

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<style>
    #main div {
        float: left;
        width: auto;
        height: auto;
    }
    
    #main img {
        padding: 10px;
        width: 180px;
        height: auto;
    }
</style>

<body>
    <div id="main"></div>
    <script type="text/javascript">
        //本代码加载出的图片是我自己找的接口，可以根据需要更改
        window.onload = function() {
            http();
        }
        // 定义函数是为了在图片加载完成之后调用 否则获取不了高度 
            function layout(id, tag, img) {
                // showImg 滚动执行函数 
                window.onscroll = showImg
                var oMain = document.getElementById(id);
                var oDiv = oMain.getElementsByTagName(tag);
                var oImg = oMain.querySelectorAll(img);
                imgPush(oMain, oDiv, oImg);
            } // 设置大盒子的宽度 
            function imgPush(oMain, oDiv, oImg) {
                var oimg = [];
                for(var i = 0; i < oImg.length; i++) {
                    oimg.push(oImg[i]);
                }
                var width = oimg[0].offsetWidth;
                var DocuW = document.documentElement.clientWidth;
                var list = Math.floor(DocuW / width);
                oMain.style.cssText = "width:" + list * width + "px; margin: 0 auto;";
                loca(oDiv, list, width);
            }
            // 让每个图片去该去的地方 
            function loca(oDiv, list, width) {
                var Height = [];
                for(var j = 0; j < oDiv.length; j++) {
                    if(j < list) {
                        Height[j] = oDiv[j].offsetHeight
                    } else {
                        var minH = Math.min.apply(null, Height);
                        oDiv[j].style.position = 'absolute';
                        oDiv[j].style.top = minH + 'px';
                        oDiv[j].style.left = index() * width + 'px';
                        Height[index()] += oDiv[j].offsetHeight;
                    }
                }
                // 获取每回遍历最小值的下标 
                function index() {
                    for(var h = 0; h < Height.length; h++) {
                        if(Height[h] == minH) {
                            return h;
                        }
                    }
                }
            }
            // 请求图片服务器 渲染页面 
            function http() {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "https://www.apiopen.top/meituApi", true);
                xhr.send();
                var Main = document.getElementById("main");
                xhr.onreadystatechange = function() {
                    if(xhr.readyState == 4 && xhr.status == 200) {
                        var data = JSON.parse(xhr.responseText).data
                        for(var i = 0; i < data.length; i++) {
                            var img = document.createElement("img");
                            var div = document.createElement("div");
                            img.src = data[i].url;
                            div.appendChild(img);
                            Main.appendChild(div);
                        }
                        // 当最后一个图片加载完毕 从新排序 
                        var img = document.getElementsByTagName("img");
                        var subscript = img.length - 1;
                        img[subscript].onload = function() {
                            layout('main', 'div', 'img');
                        }
                    }
                }
            }
            //滚动事件 
            function showImg() {
                var scollH = document.documentElement.scrollTop;
                var cliH = document.documentElement.clientHeight;
                varH = document.documentElement.scrollHeight;
                if(H - scollH <= cliH + 150) {
                    http();
                }
            }
        </script>

    </body>
</html>