纯CSS实现瀑布流效果
瀑布流实际上是非常常用的网页布局效果,像著名的设计网站https://www.pinterest.com/就使用了这种布局,好处就是使图片更加富有层次感且更有序,看起来像“瀑布”一样。
现在相关的成熟js套件有很多,例如lsotope.js,masonry.js;
这里讨论一下纯CSS实现的方法、效果以及其局限性。
HTML部分代码
这里的https://picsum.photos/360/460?random=1可以随机生成制定宽高的图片,在前端学习、测试的时候使用非常方便
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
</head>
<body>
<div class="masonry">
<div class="item">
<img src="https://picsum.photos/360/460?random=1" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/360/420?random=2" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/360/530?random=3" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/360/300?random=4" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/360/480?random=5" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/360/370?random=6" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/360/290?random=7" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/360/410?random=8" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/360/440?random=9" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/360/460?random=10" alt="">
</div>
</div>
</body>
</html>
CSS部分代码
body{
margin: 4px;
font-family: Arial, Helvetica, sans-serif;
}
.masonry{
column-count: 4;
column-gap: 0;
}
.item{
padding: 2px;
}
.item img{
display: block;
width: 100%;
height: auto;
}
实现效果:
cloumn是CSS3属性,用于指定列的宽度和数量。cloumn-cout为将文本分为多少列,cloumn-gap为列之间的差距。
简单来说cloumn可以非常方便地实现瀑布流效果,只需要短短两个css样式,但劣势也很明显:它是将图片按列分布的,即图片是从上向下、自左向右排列的,如果网页有某些特定的需求像要实现按时间、按兴趣之类的优先展示,cloumn就不能很好的实现其效果。
本文章主要来自https://www.bilibili.com/video/BV1xa4y147JP视频