一、什么是瀑布流
瀑布流，又被称作为瀑布流式布局，是一种比较流行的网站页面布局方式，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。这种布局方式常见于一些图片为主的网站
为什么要使用瀑布流：
1、吸引用户当用户在浏览瀑布流式布局的时候（这里抛开懒加载），用户会产生一种错觉，就是信息是不停的在更新的，这会激发用户的好奇心，使用户不停的往下滑动。
2.良好视觉体验采用瀑布流布局的方式可以打破常规网站布局排版，给用户眼前一亮的新鲜感，用户在浏览内容时会感到很有新鲜感，带来良好的视觉体验。
3.更好的适应移动端由于移动设备屏幕比电脑小，一个屏幕显示的内容不会非常多，因此可能要经常翻页。而在建网站时使用瀑布流布局，用户则只需要进行滚动就能够不断浏览内容。
我们已经总结出了瀑布流式布局的两大特征：内容框宽度固定，高度不固定。内容框从左到右排列，一行排满后，其余内容框就会按顺序排在短的一列后。那么我们根据这两大特征就不难想出它的实现原理：首先我们先通过计算一行能够容纳几列元素（因为我们需要在不同的设备上浏览），然后在通过计算比较找出这一列元素中高度之和最小一列，然后将下一行的第一个元素添加至高度之和最小的这一列的下面，然后继续计算所有列中高度之和最小的那一列，然后继续将新元素添加至高度之和最小的那一列后面，直至所有元素添加完毕。
先看看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瀑布流</title>
<style>
* {
margin: 0;
padding: 0;
}
.item {
float: left;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
font-weight: 700;
color: aliceblue;
margin-right: 15px;
margin-bottom: 15px;
width: 205px;
position: absolute;
}
.item-1 {
background-color: rgb(206, 169, 169);
height: 300px;
}.item-2 {
background-color: rgb(131, 226, 174);
height: 150px;
}.item-3 {
background-color: rgb(77, 30, 30);
height: 350px;
}.item-4 {
background-color: rgb(49, 62, 134);
height: 300px;
}.item-5 {
background-color: rgb(230, 99, 99);
height: 200px;
}.item-6 {
background-color: rgb(206, 169, 169);
height: 300px;
}.item-7 {
background-color: rgb(124, 126, 145);
height: 400px;
}.item-8 {
background-color: rgb(169, 199, 38);
height: 230px;
}.item-9 {
background-color: rgb(114, 128, 53);
height: 300px;
}.item-10 {
background-color: rgb(48, 54, 18);
height: 260px;
}.item-11 {
background-color: rgb(118, 122, 96);
height: 230px;
}.item-12 {
background-color: rgb(118, 122, 96);
height: 240px;
}.item-13 {
background-color: rgb(118, 122, 96);
height: 250px;
}.item-14 {
background-color: rgb(118, 122, 96);
height: 270px;
}.item-15 {
background-color: rgb(118, 122, 96);
height: 330px;
}.item-16 {
background-color: rgb(118, 122, 96);
height: 200px;
}.item-17 {
background-color: rgb(118, 122, 96);
height: 100px;
}.item-18 {
background-color: rgb(118, 122, 96);
height: 400px;
}.item-19 {
background-color: rgb(118, 122, 96);
height: 340px;
}.item-20 {
background-color: rgb(118, 122, 96);
height: 350px;
}.item-21 {
background-color: rgb(118, 122, 96);
height: 360px;
}.item-22 {
background-color: rgb(118, 122, 96);
height: 370px;
}
</style>
</head>
<body>
<div id="box">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
<div class="item item-10">10</div>
<div class="item item-11">11</div>
<div class="item item-12">12</div>
<div class="item item-13">13</div>
<div class="item item-14">14</div>
<div class="item item-15">15</div>
<div class="item item-16">16</div>
<div class="item item-17">17</div>
<div class="item item-18">18</div>
<div class="item item-19">19</div>
<div class="item item-20">20</div>
<div class="item item-21">21</div>
<div class="item item-22">22</div>
</div>
</body>
<script>
var items = document.getElementsByClassName('item');
//定义间隙10像素
var gap = 10;
//进页面执行函数
window.onload = function () {
waterFall();
}
function waterFall() {
//首先确定列数 = 页面的宽度 / 图片的宽度
var pageWidth = getClient().width;
var itemWidth = items[0].offsetWidth;
var columns = parseInt(pageWidth / (itemWidth + gap));
var arr = [];//定义一个数组，用来存储元素的高度
for(var i = 0;i < items.length; i++){
if(i < columns) {
//满足这个条件则说明在第一行，文章里面有提到
items[i].style.top = 0;
items[i].style.left = (itemWidth + gap) * i + 'px';
arr.push(items[i].offsetHeight);
}else {
//其他行，先找出最小高度列，和索引
//假设最小高度是第一个元素
var minHeight = arr[0];
var index = 0;
for(var j = 0; j < arr.length; j++){//找出最小高度
if(minHeight > arr[j]){
minHeight = arr[j];
index = j;
}
}
//设置下一行的第一个盒子的位置
//top值就是最小列的高度+gap
items[i].style.top = arr[index] + gap + 'px';
items[i].style.left = items[index].offsetLeft + 'px';
//修改最小列的高度
//最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
arr[index] = arr[index] + items[i].offsetHeight + gap;
}
}
}
//当页面尺寸发生变化时，触发函数，实现响应式
window.onresize = function () {
waterFall();
}
// clientWidth 处理兼容性
function getClient() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
// scrollTop兼容性处理
function getScrollTop() {
return window.pageYOffset || document.documentElement.scrollTop;
}
</script>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
