视频教程网站模板网站推广
瀑布流又称瀑布流式布局，是一种多列等宽不等高的一种页面布局方式。
视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，这种布局会不断加载数据并附加至当前的尾部。是一种多列等宽不等高的一种页面布局方式，用于图片比较复杂，图片尺寸比较复杂时可以使用的一种展示方式，这种展示方式可以使页面比较美观，让人有种错落有致的感觉。瀑布流是一种允许用户不断往下滑动，页面自动刷新呈现内容的交互形式。瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。沉浸式可以让用户更快、更好地进入视频情境之中，而忘记真实世界的情境，因为没有其它视频信息的干扰，能够让用户只专注于当前的视频。设置成瀑布流样式且视频浏览模式开启沉浸式浏览后，视频播放模式会以类似“抖音上下滑"的沉浸式视频浏览方式展现。
瀑布流的优点
优点如下：
- 节省空间，外表美观，更有艺术性。
- 对于触屏设备非常友好，通过向上滑动浏览
- 用户浏览时的观赏和思维不容易被打断，留存更容易。
从体验的心理讲，女性是一种逛街数小时都不需要停歇的生物，一眼望不到头的瀑布流契合了这种心理。瀑布流的图片就像商品，就像逛街、就像扫货。女性只要不断往下拉伸页面，就像置身在一条没有尽头的购物街，没有层高限制的商场中一样
瀑布流的缺点
缺点如下：
- 用户无法了解内容总长度，对内容没有宏观掌控。
- 用户无法了解现在所处的具体位置，不知道离终点还有多远。
- 回溯时不容易定位到之前看到的内容。
- 容易造成页面加载的负荷。
- 容易造成用户浏览的疲劳，没有短暂的休息时间。
瀑布流的适用场景
- 内容以图片为主的时候，瀑布流是更好的选择。图片占用空间比较大，并且大脑理解的速度相比理解文字要快，短时间内可以扫过的内容很多，所以如果用分页显示的话用户务必会频繁的翻页，影响沉浸式的体验，而瀑布流可以解决这个问题。
- 信息与信息之间相对独立时，瀑布流是更好的选择。如果信息关联性强，用户务必会进行大量的回溯操作去查看之前或者之后的信息，相反，如果信息相对独立的话，可以使用瀑布流，让用户同时接受来自不同地方的信息。
- 信息与搜索匹配比较模糊时，瀑布流是更好的选择。瀑布流给人的直观印象，就是同时显示的信息与用户搜索的匹配度大致一样，而分页显示的直观印象则是越靠上的信息被认为与用户的搜索越匹配。因此，当信息与搜索匹配度没有明显区分度时，可以采用瀑布流。
实现方式
-
原生JS实现瀑布流
html布局
<div id="wrap"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><div class="item4">4</div><div class="item5">5</div><div class="item6">6</div><div class="item7">7</div><div class="item8">8</div><div class="item9">9</div><div class="item10">10</div></div>css样式
<style>* {margin: 0;padding: 0;}body {padding: 10px;background-color: lightgray;}body::-webkit-scrollbar {width: 4px;height: 1px;}body::-webkit-scrollbar-thumb {border-radius: 2px;background: #E0E0E0;}body::-webkit-scrollbar-track {border-radius: 10px;background: #FFF;}#wrap {width: 100%;height: calc(100vh - 20px);/* 父元素设置相对定位 */position: relative;}#wrap div {width: calc(100% / 3 - 20px / 3);background-color: #FFF;border-radius: 8px;/* 子元素设置绝对定位 */position: absolute;/* 初始的左、上边距都设置为0 */left: 0;top: 0;font-size: 40px;font-weight: bold;text-align: center;}#wrap div img {width: 100%;border-radius: 8px 8px 0 0;vertical-align: bottom}#wrap div p {font-size: 24px;}.item1 {height: 200px;}.item2 {height: 250px;}.item3 {height: 150px;}.item5,.item7 {height: 200px;}.item4,.item10 {height: 150px;}.item6 {height: 240px;}.item9 {height: 200px;}.item8 {height: 250px;}</style>js代码
<script>let divList = $('#wrap div') // 获取到需要布局显示的div容器divList = Array.from(divList) // 通过Array的from()方法将伪数组转化为真正的数组let pageW = document.documentElement.clientWidth // 获取当前屏幕的宽度let divW = divList[0].clientWidth // 获取一个div容器的宽度let cols = Math.floor(pageW / divW) // 计算一行能够放几个div容器let arrH = [] // 用来存储每个div容器的高度// 循环div容器的数组divList.forEach((item, index) => {// 1. 对下标小于一行个数的div容器进行操作if (index < cols) {arrH.push(item.clientHeight) // 将div容器的高度放入数组中item.style.left = index * divW + index * 10 + 'px' // 同时设置每个容器的left值，第一行top都为0}})// 2. 对剩余的div容器进行循环for (let i = cols; i < divList.length; i++) {let minH = Math.min.apply(Math, arrH), // 获取到数组中最小的高度idx_min = arrH.indexOf(minH) // 查找到最小高度的下标divList[i].style.left = divList[idx_min].style.left // 让当前的div容器和最小下标的left值相同divList[i].style.top = minH + 10 + 'px' // top值在原来的最小高度上+10（为了是容器之间有一个间隙，可随意写）// 最小列的高度 = 当前自己的高度 + 新容器的高度 + 间隙arrH[idx_min] = minH + divList[i].clientHeight + 10}</script>column多列布局实现瀑布流
html结构和js实现的布局一样
改变一下css的样式
* {margin: 0;padding: 0;
}body {padding: 5px;background-color: lightgray;
}body::-webkit-scrollbar {width: 4px;height: 1px;
}body::-webkit-scrollbar-thumb {border-radius: 2px;background: #E0E0E0;
}body::-webkit-scrollbar-track {border-radius: 10px;background: #FFF;
}/* 使用column多列布局 */
/* 主要使用了 column-count 和 column-gap 属性
*/
#wrap {width: 100%;height: calc(100vh - 20px);column-count: 3; /* 列数 */column-gap: 10px; /* 列与列之间的距离 */
}#wrap div {background-color: #FFF;border-radius: 8px;font-size: 40px;font-weight: bold;text-align: center;margin-bottom: 10px;
}#wrap div img{width: 100%;border-radius: 8px 8px;vertical-align: bottom;
}#wrap div p{font-size: 24px;
}.item1 {height: 200px;
}.item2 {height: 250px;
}.item3,
.item5,
.item7 {height: 200px;
}.item4,
.item10 {height: 150px;
}.item6{height: 240px;
}
.item9 {height: 100px;
}.item8 {height: 250px;
}