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