前端特效动画 ------- 瀑布流（HTML、CSS、JS）

1、瀑布流是什么

视觉表现为参差不齐的多栏布局

2、为什么要使用瀑布流

• 需求一：要展示很多张图片
• 需求二：图片不可以 不按比例 缩放拉伸
• 需求三：图片大小各自不一

3、瀑布流解析原理

3.1、图片大小：等宽不等高

3.2、瀑布流算法

现在有四张大小不一的图片

现在插入第五张图片

插入的是第一列中 高度最小 的那张图片下面

也就是说：图片的定位是：

• position:absolute
• left: 最小高度的索引 * 图片的宽度
• top: 最小高度的图片的高度

3.3、难点及解析

• 如何得到最小高度的 图片索引？

可以设置一个数组，比如一行有 四列：

刚开始的数组： [100, 200, 50, 150]，所以最小高度为 50，索引为2

将第5张放在第3张图片下面

于是数组变成：[100, 200, 150, 150], 所以最小高度为100，索引为0

将第6张放在第1张图片下面

。。。。。。以此类推

• 如何知道一行有 多少列？

列数等于：屏幕宽度 / （每一张图片宽度 + margin值），向下取整

3.4、代码演示

图片地址大家可以找自己的填充进去
效果

<div class="box"><img src="img/捕获1.png"></div>
<div class="box"><img src="img/高等数学.jpg"></div>
<div class="box"><img src="img/Oracle数据库.jpg"></div>
<div class="box"><img src="img/企鹅.jpg"></div>
<div class="box"><img src="img/abcd.jpg"></div>
<div class="box"><img src="img/C语言.jpg"></div>
<div class="box"><img src="img/忆猪圈.jpg"></div>
<div class="box"><img src="img/java语言基础.jpg"></div>
<div class="box"><img src="img/Login.jpg"></div>
<div class="box"><img src="img/小肥猪.jpg"></div>
<div class="box"><img src="img/book2.jpg"></div>
<div class="box"><img src="img/book3.jpg"></div>

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f1ebeb;
}
.box {
  position: absolute;
  width: 300px;
  padding: 10px;
  box-sizing: border-box;
  
}
img {
  width: 100%;
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}

window.onload = () => {
  waterFall()
}
window.onresize = () => {
  waterFall()
}
// 瀑布流的函数
function waterFall() {
   // 1、求出列数
   let box = [...document.getElementsByClassName('box')];
   let boxWidth = box[0].offsetWidth;  // 当前图片的宽度
   let screenWidth = document.body.clientWidth;  // 整个屏幕的宽度

   let cols = Math.floor(screenWidth / boxWidth) // 列数

   // 2、创建高度数组，存放高度值
   let heightArr = new Array(cols);
   for(let i = 0; i < cols; i++) {
     heightArr[i] = 0;
   }

  // 3、图片遍历循环：第一排不进行定位，取高度值
  //               后面的排 定位 
  box.forEach((item, index) => {
    // 3.1 取出图片的高度
    let boxHeight = item.offsetHeight;
   // 3.2 获取最小高度的索引
    let minIndex = getMinArray(heightArr); 
    // 3.3 定位
    item.style.left = minIndex * boxWidth + 'px';
    item.style.top =  heightArr[minIndex] + 'px';
    // 3.4 将高度相加并且加入数组
    heightArr[minIndex] += boxHeight
  });
}
// 获取最小高度的索引
function getMinArray(arr) {
  let minValue = arr[0];
  let minIndex = 0;
  for (let i = 1; i < arr.length; i++) {
    if(arr[i] < minValue) {
      minValue = arr[i];
      minIndex = i
    }
  }
  return minIndex;
}