瀑布流布局——原生JS_瀑布流需要算每个盒子的高度吗-CSDN博客

本文链接：https://blog.csdn.net/qq_41557293/article/details/99716512

瀑布流布局——原生JS

**
大体思路：
1，瀑布流布局我们要其他列盒子根据第一列盒子的高度和宽度进行绝对定位。
2，瀑布流布局的特点是，宽度相同，高度不同。
3，我们需要知道盒子的宽度，高度，屏幕的宽度，一行的列数，需要一个存放第一列盒子的高度。
4，根据屏幕的宽度和每个盒子的宽度，可以求出一行的列数。
5，我们需要获取每个盒子的高度。
6，判断出第一行的盒子，将第一行盒子的高度存储进数组里，我们要根据第一行最矮的盒子进行定位。因为后面的盒子要追加到最矮盒子的后面。
7，获取最矮高度盒子的下标，因为我们要根据下标判读盒子距离左边的位置。
8，一定要更新高度，如果不更新高度所有盒子都会向第一行最矮高度盒子进行定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流布局</title>
    <link rel="stylesheet" href="Demo.css">
</head>
<body>
    <div class="main" id="main">
  <div class="boxWrappper">
   <div class="box"><img src="图1.bmp" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图4.png" alt=""></div>
   <div class="box"><img src="图5.png" alt=""></div>
   <div class="box"><img src="图6.png" alt=""></div>
   <div class="box"><img src="图3.png" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图5.png" alt=""></div>
   <div class="box"><img src="图6.png" alt=""></div>
   <div class="box"><img src="图1.bmp" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图4.png" alt=""></div>
   <div class="box"><img src="图5.png" alt=""></div>
   <div class="box"><img src="图3.png" alt=""></div>
   <div class="box"><img src="图1.bmp" alt=""></div>
   <div class="box"><img src="图1.bmp" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图4.png" alt=""></div>
   <div class="box"><img src="图5.png" alt=""></div>
   <div class="box"><img src="图6.png" alt=""></div>
   <div class="box"><img src="图3.png" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图5.png" alt=""></div>
   <div class="box"><img src="图6.png" alt=""></div>
   <div class="box"><img src="图1.bmp" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图4.png" alt=""></div>
   <div class="box"><img src="图5.png" alt=""></div>
   <div class="box"><img src="图3.png" alt=""></div>
   <div class="box"><img src="图1.bmp" alt=""></div>
   <div class="box"><img src="图1.bmp" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图4.png" alt=""></div>
   <div class="box"><img src="图5.png" alt=""></div>
   <div class="box"><img src="图6.png" alt=""></div>
   <div class="box"><img src="图3.png" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图5.png" alt=""></div>
   <div class="box"><img src="图6.png" alt=""></div>
   <div class="box"><img src="图1.bmp" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图4.png" alt=""></div>
   <div class="box"><img src="图5.png" alt=""></div>
   <div class="box"><img src="图3.png" alt=""></div>
   <div class="box"><img src="图1.bmp" alt=""></div>
   <div class="box"><img src="图1.bmp" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图4.png" alt=""></div>
   <div class="box"><img src="图5.png" alt=""></div>
   <div class="box"><img src="图6.png" alt=""></div>
   <div class="box"><img src="图3.png" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图5.png" alt=""></div>
   <div class="box"><img src="图6.png" alt=""></div>
   <div class="box"><img src="图1.bmp" alt=""></div>
   <div class="box"><img src="图2.bmp" alt=""></div>
   <div class="box"><img src="图4.png" alt=""></div>
   <div class="box"><img src="图5.png" alt=""></div>
   <div class="box"><img src="图3.png" alt=""></div>
   <div class="box"><img src="图1.bmp" alt=""></div>
  </div>
    </div>
</body>
</html>
<script src="Demo.js"></script>

*{
    margin: 0;
    padding: 0;
}
.main{
   position: relative;
   margin: 0 auto;
   width: 800px;
}
.main .box img{
    width: 200px;
}
.main .box{
    float: left;
}

var box = document.getElementsByClassName('box'),
 boxWidth = box[0].offsetWidth,//获取盒子当前的宽度
 screenWidth = 900,//获取屏幕的宽度，可以自行设置
 cols = parseInt(screenWidth/boxWidth),//根据屏幕宽度和盒子宽度求出列数,转换为整数.
 heightArray = [];//用于存储第一列盒子的高度
 for(var i = 0;i < box.length;i++){
  var boxHeight = box[i].offsetHeight;//获取每个盒子的高度
  if(i < cols){
   heightArray[i] = boxHeight;//因为根据第一行盒子的高度进行布局。
  }else{
   var MinBoxHeight = Math.min.apply(Math.min,heightArray),//获取最矮盒子的高度
    MinBoxHeightIndex = heightArray.indexOf(MinBoxHeight);//获取最矮盒子高度的下标
    box[i].style.position = 'absolute';
    box[i].style.left = MinBoxHeightIndex * boxWidth + 'px';
    console.log(MinBoxHeightIndex,MinBoxHeight);
    box[i].style.top = MinBoxHeight + 'px';
    heightArray[MinBoxHeightIndex] += boxHeight;//更新高度，如果不更新所有盒子都会根据最矮的盒子进行定位
  }
 }