Html部分
<div class="waterfall"> <div class="item"> <a href="javascript:void(0)"> <span class="img"><img src="/upload/images/2021/06/24/th-cm-13327104445.jpg"></span> <span class="title">校园风光</span> </a> </div> <div class="item"> <a href="javascript:void(0)"> <span class="img"><img src="/upload/images/2021/06/24/th-cm-13328104503.jpg"></span> <span class="title">校园风光</span> </a> </div> <div class="item"> <a href="javascript:void(0)"> <span class="img"><img src="/Upload/images/2020/07/17/0952577912.jpg"></span> <span class="title">校园风光</span> </a> </div> </div>
css样式:
.waterfall{ column-count: 3; } .waterfall { width: 100%; -moz-column-gap:10px; /* Firefox */ -webkit-column-gap:10px; /* Safari 和 Chrome */ column-gap: 10px; column-count:3; margin: 0 auto; } @media (min-width: 992px) and (max-width: 1300px) { .waterfall { column-count: 3; } } @media (min-width: 768px) and (max-width: 991px) { .waterfall { column-count: 2; } } @media (max-width: 767px) { .waterfall { column-count: 1; } } .waterfall .item { padding: 10px; margin-bottom: 20px; break-inside: avoid; border: 1px solid #ccc; } .waterfall .item span.img{ display:block; width:100%; overflow:hidden; } .waterfall .item img { max-width: 100%; vertical-align: middle; transition: all 0.6s; overflow:hidden; } .waterfall .item:hover img { transform: scale(1.4); } .waterfall .item span.title{ display:block; line-height:2; text-align:center; }