具體效果如下圖

html如下圖所示

<div>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
</div>

css如下圖所示

*{
    margin: 0;
    padding: 0;
}
body{
    /*float: left;*/
    /*display: flex;*/
    /*justify-content: center;*/
}
div
 
{
    width: 1200px;
    margin: 0 auto;
}
ul{
    float: left;
    list-style: none;
    width: 200px;
    margin:0 20px;
}

js如下圖所示

window.onload=function () {
    //先獲取所有的UL遍歷成陣列，設定usf為列印圖片的個數,設定bodyHeight為圖片到達停止的高度
    let oUl=document.getElementsByTagName("ul");
    let usf=0,bodyHeight=1000;
    //從getPics中呼叫json為utp返回，並執行方法
 
    myajax("get","getPics.php","cpage=1",function (utp) {
        //將傳回的文字轉換成json
        let json=JSON.parse(utp);
        //遍歷整個json
        for (tk in json){
            //判斷瀏覽器所有內容高度小於設定的值，當超出時跳出迴圈
            if (document.documentElement.scrollHeight<bodyHeight){
                //新建一個li並新建一個img
                
 
let oLi=document.createElement("li");
                let imgesP=document.createElement("img");
                //給img賦值
                imgesP.src=json[tk].image;
                imgesP.style.width="200px";
                //根據寬度更改高度
                imgesP.style.height=(200/json[tk].width)*json[tk].height+"px";
                imgesP.style.padding="5px 10px 5px 10px";
                imgesP.style.backgroundColor="aqua";
                imgesP.id=json[tk].id;
                //獲取最短的ul的索引值
                let jishu=memin(0,oUl);
                //將img新增進li
                oLi.appendChild(imgesP);
                //將li新增進最短的ul
                oUl[jishu].appendChild(oLi);
                //統計圖片次數增加
                usf++;
            }else {
                break;
            }
        }
    });
    //設定一個方法用於判斷，傳入陣列的最小值並返回
    function memin(min,objkt) {
        for (let i=1;i<objkt.length;i++){
            if (objkt[min].offsetHeight>objkt[i].offsetHeight){
                min=i;
            }
        }
        return min;
    }
    //設定一個方法用於判斷，傳入陣列的最大值並返回
    function memax(max,objkt){
        for (let i=1;i<objkt.length;i++){
            if (objkt[max].offsetHeight<objkt[i].offsetHeight){
                max=i;
            }
        }
        return max;
    }
    //判斷滾動條滾動事件
    window.onscroll=function () {
        //獲取瀏覽器滾動的高度和螢幕所佔高度
        var bodySc=document.documentElement.scrollTop;
        var bodyChe=document.documentElement.clientHeight;
        //判斷滾動高度加螢幕高度如果大於設定的高度，進入判斷
        if (bodyChe+bodySc>bodyHeight){
            //給設定的高度增加500
            bodyHeight+=500;
            //呼叫ajax，返回json文字
            myajax("get","getPics.php","cpage=1",function (utp) {
                //將文字裝換為json
                let json=JSON.parse(utp);
                //設定while迴圈，當頁面所佔高度小於設定高度，迴圈
                while (document.documentElement.scrollHeight<bodyHeight){
                    //判斷列印的圖片是否超出json所帶圖片個數，如果超出強制跳出迴圈
                    if (usf>=json.length)
                        break;
                    //建立一個li和一個img
                    let oLi=document.createElement("li");
                    let imgesP=document.createElement("img");
                    //給img賦值
                    imgesP.src=json[usf].image;
                    imgesP.style.width="200px";
                    //根據寬度，計算比例，算出高度的值並賦予
                    imgesP.style.height=(200/json[usf].width)*json[usf].height+"px";
                    imgesP.style.padding="5px 10px 5px 10px";
                    imgesP.style.backgroundColor="aqua";
                    imgesP.id=json[usf].id;
                    //獲取最短的ul的索引值
                    let jishu=memin(0,oUl);
                    //將img新增進li
                    oLi.appendChild(imgesP);
                    //將li新增進最短的ul
                    oUl[jishu].appendChild(oLi);
                    //記錄新增圖片的總數加一
                    usf++;
                }
                //判斷usf是否大於json傳入
                if (usf==json.length){
                    //建立一個新的p標籤
                    let p=document.createElement("p");
                    //給新建的p賦值
                    p.innerText="後面沒有了哦";
                    p.style.width="1200px";
                    p.style.height="50px";
                    p.style.textAlign="center";
                    //獲取ul中高度最大ul的索引值
                    let jishu=memax(0,oUl);
                    //給p新增內邊距，使其在最底部
                    p.style.paddingTop=oUl[jishu].offsetHeight+50+"px";
                    //給最外層的div新增這個p
                    document.getElementsByTagName("div")[0].appendChild(p);
                    //給usf加一，使這個判斷不在被執行，反正反覆新增
                    usf++;
                }
            });
        }
    }
}