【摘要】瀑布流简介与JS简易实现
瀑布流
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。（本文主要介绍JS实现部分，html部分甚为简略，后会将代码一同贴在文章结尾处） …

瀑布流简介与JS简易实现

瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。在这里插入图片描述
（本文主要介绍JS实现部分，html部分甚为简略，后会将代码一同贴在文章结尾处）

特点

1.瀑布流对用户来说有着很强的吸引力，瀑布流会在它的页面底部给用户不断地加载新的暗示信息，通过给出不完整的视觉图片去吸引你的好奇心，让你停不下来地想要向下不断地探索。

2、瀑布流的信息较为集中，可以在最小的操作成本下能够获得最多的内容体验，因此瀑布流能更好的适应移动端，由于移动设备屏幕比电脑小，一个屏幕显示的内容不会非常多，因此可能要经常翻页。而在建网站时使用瀑布流布局，用户则只需要进行滚动就能够不断浏览内容。

3、另外瀑布流的主要特质就是：定宽而不定高，这样的页面设计区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动来缓解视觉的疲劳。

实现原理

瀑布流有两大特征

1.内容框宽度固定，高度不固定。
2.内容框从左到右排列，一行排满后，其余内容框就会按顺序排在短的一列后。

（可以用最小二叉树来类比瀑布流的形成算法）
因此在某种程度上瀑布流的实现原理与最小二叉树类似

首先我们先通过计算一行能够容纳几列元素（因为我们需要在不同的设备上浏览）

在这里插入图片描述

然后在通过计算比较找出这一列元素中高度之和最小一列

（假设就是我们框起来的这一列）
在这里插入图片描述

然后将下一行的第一个元素添加至高度之和最小的这一列的下面

在这里插入图片描述

然后继续计算所有列中高度之和最小的那一列，然后继续将新元素添加至高度之和最小的那一列后面，直至所有元素添加完毕。

在这里插入图片描述

实现步骤及算法

1.将图片导入，后将其统一定位为 position：relative

 #container{ position: relative; }

  
 
  1
  2
  3

2.建立一个JS文件并在html文件中引入

	<script src="./index.js"></script>

  
 
  1

3.全局监听每一张图片加载时的状况，以备后续图片的安放

window.onload = function () { imgLocation('container', 'box')
}

  
 
  1
  2
  3

4.拿到页面上所有要摆放的图片的数量

function imgLocation(parent, content) {
	var cparent = document.getElementById(parent)
	var ccontent = getChildElemnt(cparent, content)
}

function getChildElemnt(parent, content) { const contentArr = [] const allContent = parent.getElementsByTagName('*')
	//取到‘parent’中的所有的子容器 for (var i = 0; i < allContent.length; i++) { if (allContent[i].className == content) { contentArr.push(allContent[i]) } } // 取到想要的子容器的数量 return contentArr
}
	//这里也可以使用dom的querySelectorAll()方法

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

5.找到图片的宽度和需要图片进行插入的位置

	var imgWidth = ccontent[0].offsetWidth
	//拿到图片的宽度
	var num = Math.floor(document.documentElement.clientWidth / imgWidth)
	//得到一横行可以放置图片的数量
	cparent.style.cssText = `width: ${imgWidth * num} px` 
  
 
  1
  2
  3
  4
  5
  6

6.在确切位置上放置需要被放置的图片，并进行循环，将该页面上的所有图片按需要的位置加入

 var BoxHeightArr = [] for (var i = 0; i < ccontent.length; i++) { if (i < num) { BoxHeightArr[i] = ccontent[i].offsetHeight } else { var minHeight = Math.min.apply(null, BoxHeightArr) var minIndex = getMinHeightLocation(BoxHeightArr, minHeight) ccontent[i].style.position = 'absolute' ccontent[i].style.top = minHeight + 'px' ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px' BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight } } function getMinHeightLocation(BoxHeightArr, minHeight) { for (var i in BoxHeightArr) { if (BoxHeightArr[i] === minHeight) { return i } }
}
  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21

代码分享

HTML

<!DOCTYPE html>
<html lang="en">

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js 瀑布流</title> <style> *{ margin: 0; padding: 0; } #container{ position: relative; } .box{ float: left; padding: 5px; } .box-img{ width: 150px; padding: 5px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; border-radius: 5px; } .box-img img{ width: 100%; height: auto; } </style>
</head>

<body> <div id="container"> <div class="box"> <div class="box-img"> <img src="./img/1.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/2.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/3.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/4.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/5.jpg" alt=""> </div> </div> </div> <script src="./index.js"></script>
</body>

</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67

window.onload = function () { imgLocation('container', 'box')
}

// 获取到当前有多少张图片要摆放
function imgLocation(parent, content) { // 将parent下所有的内容全部取出 var cparent = document.getElementById(parent) var ccontent = getChildElemnt(cparent, content) var imgWidth = ccontent[0].offsetWidth var num = Math.floor(document.documentElement.clientWidth / imgWidth) cparent.style.cssText = `width: ${imgWidth * num} px` var BoxHeightArr = [] for (var i = 0; i < ccontent.length; i++) { if (i < num) { BoxHeightArr[i] = ccontent[i].offsetHeight } else { var minHeight = Math.min.apply(null, BoxHeightArr) var minIndex = getMinHeightLocation(BoxHeightArr, minHeight) ccontent[i].style.position = 'absolute' ccontent[i].style.top = minHeight + 'px' ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px' BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight } } // console.log(BoxHeightArr);
}
function getChildElemnt(parent, content) { const contentArr = [] const allContent = parent.getElementsByTagName('*') // console.log(allContent); for (var i = 0; i < allContent.length; i++) { if (allContent[i].className == content) { contentArr.push(allContent[i]) } } // console.log(contentArr); return contentArr
}

function getMinHeightLocation(BoxHeightArr, minHeight) { for (var i in BoxHeightArr) { if (BoxHeightArr[i] === minHeight) { return i } }
}
  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51