CSS3如何实现响应式的瀑布流?(代码实例)

CSS3如何实现响应式的瀑布流?下面本篇文章通过实例来介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

前言:虽然瀑布流在现在不是很流行了,自己之前通过JavaScript和css3都实现过。这次做项目的时候又遇到了这个问题,就重新整理了一下,并把代码放出来分享一下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .waterfall {
            width: 80%;
            column-gap:10px;
            column-count: 4;
            margin: 0 auto;
        }
        .item {
            padding: 10px;
            margin-bottom: 10px;
            break-inside: avoid;
            border: 1px solid #000;
        }
        img {
            width: 100%;
        }
        p {
            line-height: 30px;
        }
        @media (min-width: 992px) and (max-width: 1300px) {
            .waterfall {
                column-count: 3;
            }
            p {
                color:red;
            }
        }
        @media (min-width: 768px) and (max-width: 991px) {
            .waterfall {
                column-count: 2;
            }
            p {
                color: orange;
            }
        }
        @media (max-width: 767px) {
            .waterfall {
                column-count: 1;
            }
        }
    </style>
</head>
<body>
    <div>
        <div>
            <img src="1.jpg" alt="" />
            <p>
            夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚
            夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚
            夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚
            夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚
            </p>
        </div>
        <div>
            <img src="2.jpg" alt="" />
            <p>
            秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事
            秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事
            秦淮事秦淮河的故事
            </p>
        </div>
        <div>
            <img src="3.jpg" alt="" />
            <p>
            集贤亭的风光集贤亭的风光集贤亭的风光集贤亭的风光集贤亭的风光
            集贤亭的风光集贤亭的风光集贤亭的风光集贤亭的风光
            </p>
        </div>
        <div>
            <img src="4.jpg" alt="" />
            <p>茅家铺的清新茅家铺的清新茅家铺的清新</p>
        </div>
        <div>
            <img src="5.jpg" alt="" />
            <p>美丽洲的神秘</p>
        </div>
        <div>
            <img src="6.jpg" alt="" />
            <p>曲院风荷的优雅曲院风荷的优雅曲院风荷的优雅</p>
        </div>
        <div>
            <img src="1.jpg" alt="" />
            <p>夫子庙的夜晚</p>
        </div>
        <div>
            <img src="2.jpg" alt="" />
            <p>
            秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事
            秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事
            秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事
            秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事
            秦淮河的故事
            </p>
        </div>
        <div>
            <img src="3.jpg" alt="" />
            <p>集贤亭的风光</p>
        </div>
        <div>
            <img src="4.jpg" alt="" />
            <p>茅家铺的清新茅家铺的清新茅家铺的清新</p>
        </div>
        <div>
            <img src="5.jpg" alt="" />
            <p>美丽洲的神秘</p>
        </div>
        <div>
            <img src="6.jpg" alt="" />
            <p>曲院风荷的优雅曲院风荷的优雅曲院风荷的优雅</p>
        </div>
    </div>
</body>
</html>

实现效果图(为了更加清晰的表示,我也把字体颜色修改了一下)

页面宽度1300像素的时候

1.png

页面宽度在992个像素到1300像素之间的时候

2.png

页面宽度在768个像素到991像素之间的时候

3.png

页面宽度小于768像素的时候

4.png

(完)

更多web开发知识,请查阅 HTML中文网 !!

以上就是CSS3如何实现响应式的瀑布流?(代码实例)的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏