SevicheCC/Urara-Blog
1
0
Fork 0
mirror of https://github.com/Sevichecc/Urara-Blog.git synced 2025-04-30 18:49:31 +08:00
Code Issues Projects Releases Packages Wiki Activity

new post

Browse source
This commit is contained in:
sevichecc 2022-12-12 17:23:23 +08:00
parent 1dfadf2ca1
commit 469f5cfa3c
Signed by untrusted user who does not match committer: SevicheCC
GPG key ID: C577000000000000
1 changed files with 45 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
urara/2022-12-12-waterfall/+page.md Normal file
View file

@ -0,0 +1,45 @@
---
title: 瀑布流图片的简单实现
created: 2022-10-16
summary: Simple implementation of a waterfall flow picture
tags:
- CSS
---
瀑布流图片又被称为 Masonry Layout, Waterfall Layout
## HTML
```html
<div>
<img />
<img />
<img />
<img />
</div>
```
## CSS
```css
div {
/*在上层元素设置栏数*/
column-count: n;
/*垂直间距*/
column-gap: 0;
/*在间隔中加点线*/
column-rule: dotted;
}
img {
/*防止单个元素分栏*/
break-inside: avoid;
}
```
元素是从上到下竖直排列的[^1]
![](https://simpleweblearning.s3.us-west-2.amazonaws.com/2021/01/07220125/direction.png)
[^1]: [ Masonry (Waterfall) Layout with Pure CSS](https://www.simpleweblearning.com/masonry-waterfall-layout-with-pure-css/)