CSS3如何实现响应式的瀑布流？（代码实例）

编程开发 2020-09-29 02:53:12 43

导读

前言：虽然瀑布流在现在不是很流行了，自己之前通过JavaScript和css3都实现过。这次做项目的时候又遇到了这个问题，就重新整理了一下，并把代码放出来分享一下<!DOCTYPE html> <html> <head> <meta charset="……

前言：虽然瀑布流在现在不是很流行了，自己之前通过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像素的时候

CSS3如何实现响应式的瀑布流？（代码实例）