如何在不使用Flexbox的情况下实现可缩放的瀑布流式图片布局？

当然可以实现！咱们用CSS Grid就能搞定瀑布流布局，同时完美保留你想要的图片悬停缩放效果，比Flexbox更适配这种场景。下面是调整后的完整代码和详细说明：

调整后的代码 #

CSS 部分 #

.holder {
  background-color: aquamarine;
  width: 500px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%; /* 模拟原布局的间距，3列+2个间距刚好占满容器宽度 */
  grid-auto-flow: dense; /* 关键属性：自动填充网格空白，实现瀑布流 */
}

.holder>img {
  width: 100%;
  height: auto; /* 保持图片原始比例，避免变形 */
  transition: all 100ms ease; /* 保留过渡动画 */
}

.holder>img:hover {
  grid-column: span 2; /* 悬停时占据2列宽度，对应原效果的66%宽度 */
}

HTML 部分（无需修改） #

<div class="holder">
 <img src="https://images.pexels.com/photos/403571/pexels-photo-403571.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
 <img src="https://images.pexels.com/photos/219779/pexels-photo-219779.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
 <img src="https://images.pexels.com/photos/6936/desk-office-plant-succulent-6936.jpg?auto=compress&cs=tinysrgb&h=650&w=940">
 <img src="https://images.pexels.com/photos/8795/plant-cactus.jpg?auto=compress&cs=tinysrgb&h=650&w=940">
 <img src="https://images.pexels.com/photos/56589/cactus-plant-plant-rack-green-56589.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
 <img src="https://images.pexels.com/photos/137036/pexels-photo-137036.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>

核心原理说明 #

1. 瀑布流实现：

   • display: grid把容器转为网格布局，grid-template-columns: repeat(3, 1fr)创建3列等宽的网格结构。
   • grid-auto-flow: dense是实现瀑布流的关键——它会让网格自动填充上一行留下的空白区域，让下一行的图片从当前行最高图片的底部开始排列，而不是强制对齐行底线。

2. 保留缩放效果：

   • 图片设置width:100%占满所在列的宽度，height:auto确保图片比例不变，避免变形。
   • 悬停时用grid-column: span 2让图片占据2列宽度，刚好对应原代码中width:66%的视觉效果，同时保留了transition动画的流畅交互感。

如果你坚持想用Flexbox的话，需要结合JavaScript动态计算图片高度并调整排列，远不如CSS Grid简洁高效，所以更推荐上面的Grid方案哦～

内容的提问来源于stack exchange，提问作者Seb D