css3实现瀑布流

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;
}