图片瀑布流布局

具体效果如下图

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