[分享]css不规则图片排列瀑布流

CSS不规则图片排列瀑布流是一个常见的网页布局方式，它可以让网页看起来更加美观和灵活。在这篇教程中，我们将介绍如何使用CSS实现一个简单的不规则图片排列瀑布流。/ CSS样式 / .grid { di...

CSS不规则图片排列瀑布流是一个常见的网页布局方式，它可以让网页看起来更加美观和灵活。在这篇教程中，我们将介绍如何使用CSS实现一个简单的不规则图片排列瀑布流。

/* CSS样式 */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.grid-item {
  flex: 1;
  margin: 10px;
}

.grid-item img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media screen and (min-width: 768px) {
  .grid-item {
    flex-basis: calc(50% - 20px);
  }
}

@media screen and (min-width: 1024px) {
  .grid-item {
    flex-basis: calc(33.3333% - 20px);
  }
}

@media screen and (min-width: 1440px) {
  .grid-item {
    flex-basis: calc(25% - 20px);
  }
} 

上面的代码中，我们首先定义了一个名为grid的CSS类，用来包裹所有的图片，它使用了flexbox布局来实现等高的图片排列。每个图片所在的元素使用了grid-item类，并设置了一定的外边距，以区分每张图片。

接下来，我们使用@media查询来针对不同的屏幕尺寸设置不同的网格列数。我们先针对屏幕宽度大于768px的设备，设置每行显示两列，同时计算出每个列所占的宽度和外边距。接着，我们在屏幕宽度大于1024px时，设置每行显示三列；在屏幕宽度大于1440px时，设置每行显示四列。这样，我们就可以在不同尺寸的屏幕上得到适当的图片排列。

如果你想让不同的图片有不同的大小和位置，可以使用CSS的grid属性或者使用JavaScript来动态计算图片位置。以上是一个简单的CSS不规则图片排列瀑布流的实现方式。