仅使用CSS消除不同高度元素换行空隙 实现图片紧密瀑布流布局

可以仅通过CSS实现该需求。你当前遇到的空隙是flex布局的固有特性导致的：flex 开启换行后会按行排布，每一行的高度会被该行最高的元素撑开，因此该行内其他矮元素下方自然会出现多余空隙，无法通过调整flex相关参数消除。

你可以将flex布局替换为CSS多列布局实现你要的紧密瀑布流效果，修改后的CSS代码如下：

.img-panel {
    height: 60vh;
    width: 95vw;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 1vw;
    /* 替换flex相关属性为多列配置 */
    column-count: 5;
    column-gap: 1vw;
}

.img {
    width: 100%;
    border-radius: 1vmin;
    margin: 1vh 0;
    height: 8vh;
    border: 1px solid black;
    /* 避免图片被列截断 */
    break-inside: avoid;
}

.img--high {
    height: 18vh;
}

代码说明：

• column-count:5 是按照你原来18vw宽度的图片设置的列数，刚好可以放下5张图，如果你需要调整列数直接修改这个参数即可
• column-gap 控制列之间的水平间距，替代原来的图片水平margin
• break-inside: avoid 保证单张图片不会被拆分到两列显示

如果需要做响应式适配，只需要通过媒体查询修改不同屏幕宽度下的column-count参数即可，全程不需要额外JS代码。

内容的提问来源于stack exchange，提问作者Edgar TA