leiwuhen-67's blog leiwuhen-67's blog
首页
    • 《Vue》笔记
    • 《React》笔记
    • 《NodeJs》笔记
    • 《CSS》笔记
    • 《Redis》笔记
    • 基础入门
    • 《Mock》笔记
    • 《MySQL》笔记
    • 《Git》相关
影音视听
收藏
关于
GitHub (opens new window)

我的公众号

首页
    • 《Vue》笔记
    • 《React》笔记
    • 《NodeJs》笔记
    • 《CSS》笔记
    • 《Redis》笔记
    • 基础入门
    • 《Mock》笔记
    • 《MySQL》笔记
    • 《Git》相关
影音视听
收藏
关于
GitHub (opens new window)
  • Less

  • CSS

  • 瀑布流布局

    • 瀑布流布局
  • 《CSS》笔记
  • 瀑布流布局
心欲无痕
2022-06-08

瀑布流布局

概念说明

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部

瀑布流布局有优点也有缺点:

优点:节省空间,一定程度上能够缓解用户视觉疲劳,跟传统布局相比使人眼前一亮。

缺点:对于有些需要在列表页与详情页之间进行切换或页面需要放页脚时,这些情况下瀑布流布局都不适用。

实现:使用 absolute 绝对定位

html 部分代码:

<ul class="list">
	<li class="item">
		<img src="./imgs/emperor.jpeg" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
	<li class="item">
		<img src="./imgs/west-lake.jpeg" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
	<li class="item">
		<img src="./imgs/scenery.webp" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
	<li class="item">
		<img src="./imgs/avatar.jpeg" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
	<li class="item">
		<img src="./imgs/emperor.jpeg" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
	<li class="item">
		<img src="./imgs/avatar.jpeg" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
	<li class="item">
		<img src="./imgs/emperor.jpeg" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
</ul>
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

css 部分代码

.list {
	position: relative;
	margin: 20px;
	list-style: none;
}
.item {
  width: calc((100% - 40px) / 5);
  position: absolute;
  background-color: #eee;
  border-radius: 10px;
}
.img {
	width: 100%;
	border-radius: 10px 10px 0 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

js 部分代码

window.onload = function () {
	loadData()
}
function loadData () {
	let list = document.getElementsByClassName('item')
	let space = 10     // 列之间的间距
	let columns = 5    // 每一行放置几列
	let arr = []       // 用于存放图片的高度
	for (let i = 0, len = list.length; i < len; i ++) {
		let itemW = list[i].offsetWidth   // 元素宽
		if (i < columns) {
			let itemH = list[i].offsetHeight  // 元素高
			list[i].style.left = i * (itemW + space) + 'px'
			list[i].style.top = 0
			arr.push(itemH)
		} else {
			let itemIndex = 0
			let heightMin = arr[itemIndex]
			for (let j = 0; j < arr.length; j ++) {
				if (heightMin > arr[j]) {
					itemIndex = j
					heightMin = arr[j]
				}
			}
			list[i].style.left = itemIndex * (itemW + space) + 'px'
			list[i].style.top = heightMin + space + 'px'
			arr[itemIndex] = heightMin + space + list[i].offsetHeight
		}
	}
}
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

效果如下:

这里有几个注意点:

1、当列表索引小于每行放置的列数时就表示这是第一行,否则就不是第一行。

2、当一行放满后,后面的再添加数据时需要添加在高度最小的那一列后面。

3、每次添加完数据后,需要更新最小高度,否则后面添加数据时布局会有问题

编辑 (opens new window)
上次更新: 7/1/2024, 4:56:33 PM
甜甜圈加载效果

← 甜甜圈加载效果

Theme by Vdoing
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式