图片瀑布流布局

具体效果如下图

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++;
                }
            });
        }
    }
}