写一个CSS瀑布流布局

小编 2026-06-18 阅读:1317 评论:0

先看效果：再看看手机端：具体代码，这里的图片大家自行替换，不用我说了，，我用的是外链可能失效 <!DOCTYPE html> <html lang=\"en\">...

先看效果：
$\"在这里插入图片描述\"$
再看看手机端：
$\"在这里插入图片描述\"$

具体代码，这里的图片大家自行替换，不用我说了，，我用的是外链可能失效

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <title>Document</title>
    <style>
        .waterfall {
            width: 95%;
            column-gap:10px;
            column-count: 4;
            margin:auto;
        }
        .item {
        	text-align: center;
            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: 1;
            }
            p {
                color: orange;
            }
        }
        @media (max-width: 767px) {
            .waterfall {
                column-count: 1;
            }
        }
    </style>
</head>
<body>
    <div class=\"waterfall\">
        <div class=\"item\">
            <img src=\"http://pic1.win4000.com/wallpaper/2018-12-13/5c12178351394.jpg\" alt=\"\" />
            <p>白海棠（红楼梦）</p>
            <p>半卷湘帘半掩门，碾冰为土玉为盆。</p>
            <p>偷来梨蕊三分白，借得梅花一缕魂。</p>
            <p>月窟仙人缝缟袂，秋闺怨女试啼痕。</p>
            <p>娇羞默默同谁诉，倦倚西风夜已昏。</p>
        </div>
        
        <div class=\"item\">
            <img src=\"http://pic1.win4000.com/wallpaper/2018-12-13/5c12178351394.jpg\" alt=\"\" />
            <p>画堂春（纳兰容若）</p>
            <p>一生一代一双人，争教两处销魂？</p>
            <p>相思相望不相亲，天为谁春。</p>
            <p>浆向蓝桥易取，药成碧海难奔，</p>
            <p>若容相仿日牛津，相对忘贫。</p>
        </div>
        
        <div class=\"item\">
            <img src=\"http://pic1.win4000.com/wallpaper/2018-12-13/5c12178351394.jpg\" alt=\"\" />
            <p>一字诗（陈沆）</p>
            <p>一帆一江一渔舟，一个渔翁一钓钩。</p>
            <p>一俯一仰一场笑，一江明月一江秋。</p>
        </div>
        
        <div class=\"item\">
            <img src=\"http://pic1.win4000.com/wallpaper/2018-12-13/5c12178351394.jpg\" alt=\"\" />
            <p>七绝</p>
            <p>黄昏雨落一池秋，晚来风向万古愁。</p>
            <p>不厌浮生唯是梦，缘求半世但无俦。</p>
            <p>一颦一笑一伤悲，一生痴迷一世醉。</p>
            <p>一磋一叹一轮回，一寸相思一寸灰。</p>
            <p>功名万里赋予谁，去年秋江水，</p>
            <p>醉卧不识今夜愁，哀筝惹泪落，谁劝我千杯？</p>
            <p>往事难追战马肥，胡笳送君归，</p>
            <p>修道心事无人猜，青云羡慕鸟，尊前图一醉。</p>
        </div>
    </div>
</body>
<script>
</html>