纯CSS实现瀑布流效果

最新推荐文章于 2024-07-10 13:54:40 发布

鲁镇男人

最新推荐文章于 2024-07-10 13:54:40 发布

阅读量669

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45764531/article/details/110679134

版权

纯CSS实现瀑布流效果

瀑布流实际上是非常常用的网页布局效果，像著名的设计网站https://www.pinterest.com/就使用了这种布局，好处就是使图片更加富有层次感且更有序，看起来像“瀑布”一样。

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视频

鲁镇男人

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
纯CSS实现瀑布流效果

纯CSS实现瀑布流效果瀑布流实际上是非常常用的网页布局效果，像著名的设计网站https://www.pinterest.com/就使用了这种布局，好处就是使图片更加富有层次感且更有序，看起来像“瀑布”一样。现在相关的成熟js套件有很多，例如lsotope.js，masonry.js;这里讨论一下纯CSS实现的方法、效果以及其局限性。HTML部分代码这里的https://picsum.photos/360/460?random=1可以随机生成制定宽高的图片，在前端学习、测试的时候使用非常方便&l
复制链接

扫一扫