css 不规则图片瀑布流实现

要实现CSS不规则图片瀑布流效果，可以使用CSS Grid布局和一些技巧来实现。以下是一个示例代码：

HTML代码：

<div class="waterfall">
  <div class="item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="item">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <!-- 更多图片项 -->
</div>

CSS代码：

.waterfall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 使用自动填充的网格列布局 */
  grid-gap: 10px; /* 设置网格间隙 */
}

.item {
  break-inside: avoid; /* 避免在项目中断行 */
}

.item img {
  width: 100%; /* 图片宽度填满容器 */
  display: block; /* 去除图片默认的下沉效果 */
}

这样就可以实现一个CSS不规则图片瀑布流效果。通过使用CSS Grid布局和自动填充的网格列布局，可以让项目自动适应不同的屏幕宽度，并且保持不规则的瀑布流效果。你可以根据需要调整图片的宽度、网格间隙等样式来适应你的设计。