先看效果:
再看看手机端:
具体代码,这里的图片大家自行替换,不用我说了,,我用的是外链可能失效
<!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>
OK