页面瀑布流布局操作 .js

    // 第一行浮动，通过css实现
    // 类似于堆积木效果 比较第一行元素的高度，找到最矮的；
    // 然后其他的元素开始依次找到永远时最矮的那个元素，
    // 利用定位往上边放；（最矮的放上一个元素之后可能就不是最矮的啦，需要重新比较，找到新的矮的）
    // 这只不过是堆积木翻过来的效果而已
    
*{margin: 0;padding: 0;}
#cont{position: relative; margin: 0 auto;}
#cont .box{float: left;padding: 4px;}
.imgbox{border:solid 1px black;border-radius: 15px;padding: 5px;}
.imgbox img{width: 200px;display: block;}
<div id="cont">
<div class="box">
    <div class="imgbox">
        <img src="图片随便放" alt="">
    </div>
</div>
</div>
图片个数不限
<script>
	//浏览器加载完毕后执行js
    onload = function() {
        var l = new liu();
        l.sty();
    }
    class liu{
        constructor(){
            // 选择元素
            this.kuan = document.documentElement.clientWidth;
            this.cont = document.getElementById("cont");
            this.box = document.querySelectorAll(".box");
            // console.log(this.box);
        }
        // 完善布局
        sty(){
            // 首先确定一行最多能放多少元素  往下取整
            this.maxnum = parseInt(this.kuan / this.box[0].offsetWidth);
            // console.log(this.maxnum);
            // 然后确定大框宽度
            this.cont.style.width = this.maxnum * this.box[0].offsetWidth +"px";
            // console.log(this.cont.style.width);
            this.firstline();
            this.otherline();

        }
        // 第一行，获取所有元素的最小高度放在同一个数组中，准备获取最小值；
        firstline(){
            this.heightArr = [];
            for(let i=0;i<this.maxnum;i++){
                this.heightArr.push(this.box[i].offsetHeight);
            }
        }
        otherline(){
            for (let i = this.maxnum; i < this.box.length; i++) {
                // 找到最矮的
               var min = getMin(this.heightArr);
            //    获取最矮的索引（位置）
               var minindex = this.heightArr.indexOf(min);
            //    开始放
               this.box[i].style.position = "absolute";
              this.box[i].style.top = min + "px";
              this.box[i].style.left = this.box[0].offsetWidth * minindex + "px";
            //   重新计算放过之后的高度
              this.heightArr[minindex] = this.heightArr[minindex] + this.box[i].offsetHeight;
                
              // 通过循环依次排列
            }
        }
    }
    //封装排序方法
    function getMin(arr){
        var myarr = [];
        for(var j=0;j<arr.length;j++){
            myarr.push(arr[j]);
        }
        return myarr.sort((a,b)=>a-b)[0];
    }