瀑布流简介与JS简易实现
瀑布流
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。
(本文主要介绍JS实现部分,html部分甚为简略,后会将代码一同贴在文章结尾处)
特点
1.瀑布流对用户来说有着很强的吸引力,瀑布流会在它的页面底部给用户不断地加载新的暗示信息,通过给出不完整的视觉图片去吸引你的好奇心,让你停不下来地想要向下不断地探索。
2、瀑布流的信息较为集中,可以在最小的操作成本下能够获得最多的内容体验,因此瀑布流能更好的适应移动端,由于移动设备屏幕比电脑小,一个屏幕显示的内容不会非常多,因此可能要经常翻页。而在建网站时使用瀑布流布局,用户则只需要进行滚动就能够不断浏览内容。
3、另外瀑布流的主要特质就是:定宽而不定高,这样的页面设计区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动来缓解视觉的疲劳。
实现原理
瀑布流有两大特征
1.内容框宽度固定,高度不固定。
2.内容框从左到右排列,一行排满后,其余内容框就会按顺序排在短的一列后。
(可以用最小二叉树来类比瀑布流的形成算法)
首先我们先通过计算一行能够容纳几列元素(因为我们需要在不同的设备上浏览)
然后在通过计算比较找出这一列元素中高度之和最小一列
(假设就是我们框起来的这一列)
然后将下一行的第一个元素添加至高度之和最小的这一列的下面
然后继续计算所有列中高度之和最小的那一列,然后继续将新元素添加至高度之和最小的那一列后面,直至所有元素添加完毕。
实现步骤及算法
1.将图片导入,后将其统一定位为 position:relative
#container{
position: relative;
}
2.建立一个JS文件并在html文件中引入
<script src="./index.js"></script>
3.全局监听每一张图片加载时的状况,以备后续图片的安放
window.onload = function () {
imgLocation('container', 'box')
}
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) {