黑马程序员技术交流社区

标题: 前端特效动画 ------- 瀑布流（HTML、CSS、JS） [打印本页]

作者: 长沙-小知姐姐 时间: 2020-5-13 11:13
标题: 前端特效动画 ------- 瀑布流（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 = 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 < minValue) {
   minValue = arr;
   minIndex = i
}
  }
  return minIndex;
}
————————————————

原文链接：「独坐空山后」https://blog.csdn.net/pig_is_duck/article/details/106084657

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2