<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        #box {
            margin: 0 auto;
            width: 700px;
        }
        
        ul {
            width: 200px;
            float: left;
            margin: 0 auto;
            margin-right: 10px;
        }
        
        img {
            width: 200px;
            padding-top: 10px;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
    <script src="./js/1.ajax.js"></script>
    <script>
        window.onload = function() {
            let oBox = document.getElementById("box");
            let oUl = document.getElementsByTagName("ul");
            let vH = document.documentElement.clientHeight; // 可视高度
            // 最小高度的列
            function min_height(oUl) {
                let ht = oUl[0].offsetHeight; // 第一张图片的高度
                let index = 0;
                for (let i = 0; i < oUl.length; i++) {
                    if (oUl[i].offsetHeight < ht) { // 第一张图片和其他图片比较
                        ht = oUl[i].offsetHeight; // 获取最小的图片高度
                        index = i; // 获取最小高度的图片的索引
                    }
                }
                return index;
            }
            //加载图片
            function loadingImg() {
                ajax("./index.json", function(data) { // 读取本地 json 下的图片地址
                    data = (new Function("return" + data))(); // 将 string 类型的 data 转换成 数组
                    // 等价于 data = JSON.parse(data);
                    for (let i = 0; i < data.length; i++) {
                        let oLi = document.createElement("li");
                        let oImg = document.createElement("img"); // 新建图片
                        oImg.src = data[i];
                        oLi.appendChild(oImg);
                        oUl[min_height(oUl)].append(oLi); // 将图片添加到最小的那一列
                    }
                })
            }
            loadingImg();
            document.onscroll = function() { // 滚动加载图片
                let sH = document.documentElement.scrollTop || document.body.scrollTop; // 滚动高度
                if (sH + vH >= document.body.scrollHeight * 0.8) { // 文档的实际高度 * 0.8解决滚动时图片空白的问题
                    loadingImg();
                }
            }
        }
    </script>
</body>

</html>