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