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

技术
©2019-2020 Toolsou All rights reserved,
2021年2月程序员工资统计,平均15144元初识MySQL之综合复习篇(干货)Faster RCNN系列算法原理讲解(笔记)谷歌称居家办公影响工作效率!2021 年将回归线下办公C语言控制台小游戏,打砖块GDOI2019 游记CSS架构设计Python基础知识整理笔记2019年终总结——工作第二年用C++跟你聊聊“原型模式” (复制/拷贝构造函数)