css3实现图片瀑布流,根据屏幕大小列可变和不可变的的瀑布流

要使用CSS3实现一个图片瀑布流，可以使用CSS3的column-width和column-gap属性来创建列，并使用break-inside: avoid来避免图片被拆分到不同列中。下面是一个简单的示例：

HTML:

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

CSS:

.waterfall {
  column-count: 3; /* 固定列数 */
  column-gap: 1em; /* 列间隔 */
}
 
.waterfall-item {
  break-inside: avoid; /* 避免图片被拆分 */
  margin-bottom: 1em; /* 列间的间隔 */
  width: 100%; /* 列宽 */
}
 
.waterfall-item img {
  width: 100%; /* 图片宽度 */
  height: auto; /* 图片高度 */
  display: block; /* 阻止下方出现空隙 */
}

这个例子中，.waterfall是包含图片的容器，.waterfall-item是每个图片的容器。通过设置.waterfall的column-count为3，可以创建固定的列数。如果需要根据屏幕宽度调整列数，可以使用CSS媒体查询来动态改变column-count的值。