瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局。（即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。）

效果图：

瀑布流照片墙 html5_最小值

图解瀑布流算法

当第一排排满足够多的等宽图片时（如下图情况），自然而然的考虑到之后放置的图片会往下面排放。

瀑布流照片墙 html5_html_02


我们通过瀑布流算法实验得到，后面紧跟的第六张图片的位置应该是这个位置。

瀑布流照片墙 html5_瀑布流_03


那接下来的第七张图片也是如此。

瀑布流照片墙 html5_js_04


HTML+css+js如下：

<!-- //思路：
// 瀑布流效果
	// 1.第一行浮动（通过css实现）
	// 2.如何区分第一行和后面的行
		// 2.1先找到第一行最矮的
		// 2.2后面的行的所有内容全部定位
		// 2.3left设置最矮的元素的索引*任意一个元素的宽度
		// 2.4top设置成上一行最矮的元素的高度
		// 2.5修改最矮的那个元素，加上刚刚放置元素的高度
	// 重置执行2.1向后的步骤 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{width: 1000px;
		height: 1500px;
			margin: 0 auto;position: relative;}
        .box{
               float: left;
               padding: 15px 0 0 15px;
           }
       .pic{
               padding: 15px;
               border:1px solid #ccc;
               border-radius: 10px;
               box-shadow: 0 0 5px #ccc;
           }
           .pic img{
               width:190px;
              
           }
    </style>
    <script>
        onload = function(){
            var wf = new WaterF();
            wf.init();
        }
    	//想要改变窗口时实时刷新，可以写上下边的代码↓↓↓↓
        // onresize = function(){
        //     var wf = new WaterF();
        //     wf.init();
        // }
        class WaterF{
            constructor(){
                this.clientW = document.documentElement.clientWidth;
                this.abox = document.querySelectorAll(".box");
                this.cont = document.querySelector(".cont");
            }
            init(){
                // 根据屏幕的宽度 / 任意一个结构的宽度，得到一行最大能放几个
                this.maxNum = parseInt(this.clientW / this.abox[0].offsetWidth);
                // 根据一行能放置的个数 * 任意一张图片的宽度，得到了大框的真正的宽
                this.cont.style.width = this.maxNum * this.abox[0].offsetWidth + "px";

                // 完善布局之后，开始区分第一行和后面的行
                this.firstLine();
                this.otherLine();
            }
            firstLine(){
                // 第一行，获取所有元素的高度放在一个数组中，准备获取最小值
                this.heightArr = [];
                for(var i=0;i<this.maxNum;i++){
                    this.heightArr.push(this.abox[i].offsetHeight);
                }
            }
            otherLine(){
                // 需要拿到后面行的所有元素
                for(var i=this.maxNum;i<this.abox.length;i++){
                    // 在拿到后面行的元素的时候，获取第一个行的最小值和最小值所在的索引
                    // var min = Math.min(...this.heightArr);
                    var min = getMin(this.heightArr);
                    var minIndex = this.heightArr.indexOf(min);
                    // 设置定位
                    this.abox[i].style.position = "absolute";
                    // 根据最小值设置top
                    this.abox[i].style.top = min + "px";
                    // 根据最小值的索引设置left
                    this.abox[i].style.left = minIndex * this.abox[0].offsetWidth + "px";
                    // 修改最小值为，原来的数据+当前新放置元素的高度
                    this.heightArr[minIndex] = this.heightArr[minIndex] + this.abox[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];
        }
    </script>
</head>
<body>
    <div class="cont">
        //以下，用户可自行添加图片
        <div class="box">
            <div class="pic">
                <img src="./img/1.png" alt="">
            </div>
        </div>
		   <div class="box">
		       <div class="pic">
		           <img src="./img/7.png" alt="">
		       </div>
		   </div>
		   <div class="box">
		       <div class="pic">
		           <img src="./img/8.png" alt="">
		       </div>
		    </div>
			<div class="box">
			    <div class="pic">
			        <img src="./img/1.png" alt="">
			    </div>
			</div>
			<div class="box">
			    <div class="pic">
			        <img src="./img/2.png" alt="">
			    </div>
			 </div>
    </div>
</body>
</html>