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 |
|
收藏
淘帖
踩
