CSS 九宫格自动提示，轻松搞定图片过多显示

2023-11-26 22:35:11

使用 CSS 实现九宫格自动提示

九宫格布局是一种常见的设计，经常用于展示缩略图或产品图片。当图片数量较少时，我们会正常排列它们，但当图片数量超过九张时，则需要提示用户还有多少张图片未显示。我们可以使用 CSS 的 :nth-child 伪类和 display: flex 属性来实现这一效果。

下面是一个简单的 CSS 代码示例：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
}

.gallery img {
  object-fit: cover;
}

.gallery img:nth-child(9) ~ * {
  display: none;
}

.gallery-count {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  background: #ccc;
  color: #000;
}

在这个代码中，我们首先定义了一个 .gallery 容器，它使用网格布局 (display: grid) 来显示图片。网格中的列数由 grid-template-columns 属性定义为自动填充 (auto-fill)，这意味着列数将根据可用的空间自动调整。我们还设置了 grid-gap 属性来控制网格项目之间的间距。

接下来，我们为 .gallery img 定义样式，使其对象适合其容器 (object-fit: cover)。我们还使用 :nth-child(9) 伪类来选择第九个元素及其后的所有元素，并将其 display 属性设置为 none，以便在超过九个元素时隐藏它们。

最后，我们定义了一个 .gallery-count 类来显示未显示图片的数量。我们使用绝对定位 (position: absolute) 将其放置在容器的右下角，并使用填充 (padding) 和颜色 (color) 属性来设置其外观。

通过结合这些 CSS 样式，我们可以创建九宫格布局，当图片数量超过九张时，会在右下角显示未显示图片的数量。