瀑布流三部曲之css3实现

最新推荐文章于 2023-01-31 13:52:02 发布

77314

最新推荐文章于 2023-01-31 13:52:02 发布

阅读量301

点赞数

分类专栏：前端学习文章标签： css3 瀑布流

本文链接：https://blog.csdn.net/qq_14886653/article/details/52613183

版权

前端学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

以前学习瀑布流没有总结过，今天偶然看到，做个笔记，记录下，方便以后查阅。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS3实现瀑布流效果</title>
        <style>
            .container {
                -webkit-column-width: 160px;
                -moz-column-width: 160px;
                -webkit-column-gap: 5px;
                -moz-column-gap: 5px;
                margin: 0 auto;
            }

            .container div {
                width: 160px;
                margin: 4px 0;
                padding: 4px;
                border: 1px solid #cccccc;
            }

            img {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div class="container" id="main">
            <div><img src="images/P_00.jpg"></div>
            <div><img src="images/P_01.jpg"></div>
            <div><img src="images/P_02.jpg"></div>
            <div><img src="images/P_03.jpg"></div>
            <div><img src="images/P_04.jpg"></div>
            <div><img src="images/P_05.jpg"></div>
            <div><img src="images/P_06.jpg"></div>
            <div><img src="images/P_07.jpg"></div>
            <div><img src="images/P_08.jpg"></div>
            <div><img src="images/P_09.jpg"></div>
            <div><img src="images/P_010.jpg"></div>
            <div><img src="images/P_011.jpg"></div>
            <div><img src="images/P_012.jpg"></div>
            <div><img src="images/P_013.jpg"></div>
            <div><img src="images/P_014.jpg"></div>
            <div><img src="images/P_015.jpg"></div>
            <div><img src="images/P_016.jpg"></div>
            <div><img src="images/P_017.jpg"></div>
            <div><img src="images/P_018.jpg"></div>
            <div><img src="images/P_019.jpg"></div>
            <div><img src="images/P_09.jpg"></div>
            <div><img src="images/P_03.jpg"></div>
            <div><img src="images/P_04.jpg"></div>
            <div><img src="images/P_02.jpg"></div>
            <div><img src="images/P_06.jpg"></div>
            <div><img src="images/P_010.jpg"></div>
            <div><img src="images/P_011.jpg"></div>
            <div><img src="images/P_014.jpg"></div>
            <div><img src="images/P_08.jpg"></div>
            <div><img src="images/P_07.jpg"></div>
            <div><img src="images/P_017.jpg"></div>
            <div><img src="images/P_018.jpg"></div>
            <div><img src="images/P_019.jpg"></div>
            <div><img src="images/P_09.jpg"></div>
            <div><img src="images/P_03.jpg"></div>
            <div><img src="images/P_04.jpg"></div>
            <div><img src="images/P_02.jpg"></div>
            <div><img src="images/P_06.jpg"></div>
            <div><img src="images/P_010.jpg"></div>
            <div><img src="images/P_011.jpg"></div>
            <div><img src="images/P_014.jpg"></div>
            <div><img src="images/P_08.jpg"></div>
            <div><img src="images/P_07.jpg"></div>
            <div><img src="images/P_017.jpg"></div>
            <div><img src="images/P_018.jpg"></div>
            <div><img src="images/P_019.jpg"></div>
            <div><img src="images/P_09.jpg"></div>
            <div><img src="images/P_03.jpg"></div>
            <div><img src="images/P_04.jpg"></div>
            <div><img src="images/P_02.jpg"></div>
            <div><img src="images/P_06.jpg"></div>
            <div><img src="images/P_010.jpg"></div>
            <div><img src="images/P_011.jpg"></div>
            <div><img src="images/P_014.jpg"></div>
            <div><img src="images/P_08.jpg"></div>
            <div><img src="images/P_07.jpg"></div>
            <div><img src="images/P_017.jpg"></div>
            <div><img src="images/P_018.jpg"></div>
            <div><img src="images/P_019.jpg"></div>
            <div><img src="images/P_09.jpg"></div>
            <div><img src="images/P_03.jpg"></div>
            <div><img src="images/P_04.jpg"></div>
            <div><img src="images/P_02.jpg"></div>
            <div><img src="images/P_06.jpg"></div>
            <div><img src="images/P_010.jpg"></div>
            <div><img src="images/P_011.jpg"></div>
            <div><img src="images/P_014.jpg"></div>
            <div><img src="images/P_08.jpg"></div>
            <div><img src="images/P_07.jpg"></div>
        </div>
    </body>

</html>

原理，利用css3新增的多列布局，实现，简单直观，但不易于维护，动态加载不容易实现。

77314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流三部曲之css3实现

以前学习瀑布流没有总结过，今天偶然看到，做个笔记，记录下，方便以后查阅。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3实现瀑布流效果</title> <style> .container {
复制链接

扫一扫

专栏目录