CSS 计数器实现九宫格自动提示超出数量

常常在某些 app 中看到这样的九宫格设计。当缩略图不足 9 张时，正常排列，当超过 9 张时，会提示还剩多少张，以下：css

如何使用纯 CSS 实现这一效果呢？一块儿来看看吧html

1、九宫格布局

布局就很简单了，一个很普通的九宫格布局，这里使用 gridmarkdown

<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
	...
</ul>
复制代码

这里正方形能够用aspect-ratio简易实现，对应的 CSS 以下app

.list{
  position: relative;
  display: grid;
  width: 300px;
  margin: auto;
  grid-template-columns: repeat(3,1fr);
  list-style: none;
  padding: 0;
  gap: 2px;
}
.item{
  aspect-ratio: 1;/*宽高比1:1*/
}
复制代码

效果以下wordpress

那么，如何实如今超过9张时自动提示剩余张数呢？接着往下看oop

2、CSS 计数器

提到序列，天然会想到 CSS 计数器，如今咱们加上计数器布局

.list{
  /*...*/
  counter-reset: count; /*初始化*/
}
复制代码

而后在每个 .item显示数字，能够用到伪元素::afterui

.item{
  counter-increment: count;
}
.item::after{
  content: counter(count);
  /*其余样式*/
  display: grid;
  height: 100%;
  place-content: center;
  font-size: 30px;
  color: #fff;
}
复制代码

这样能够获得以下效果spa

数字是显示出来了，不过如今还有两个问题：设计

数量超过9个时，不会隐藏超过的图片
这个数字不是超出图片的数量，而是总数

3、隐藏超出的图片

这个其实很是容易，因为数量是固定的，只须要利用选择器nth-child配合~就能实现

.item:nth-child(9)~.item{
  /*选择第9个之后的元素*/
  visibility: hidden;
}
复制代码

这个地方是经过 visibility: hidden隐藏超过的图片，缘由是该属性不会影响计数器的计算，若是使用display:none则会跳过计数

4、统计超过的数量

目前因为是从第1个开始计数，因此最后统计的是整个列表的数量，可是咱们能够指定从第10个才开始计数，会获得什么效果呢？为了方便演示，暂时把隐藏打开

.item{
  /*counter-increment: count;*/
}
.item:nth-child(9)~.item{
  /*从第10个开始计数*/
  counter-increment: count;
}
.item:nth-child(9)~.item::after{
  content: counter(count);
} 
复制代码

能够看到，从第10个开始计数后，最后一个数字就表示还剩余多少张

如今把最后一张放在右下角就好了（绝对定位），最后一张能够用.item:nth-child(9)~.item:last-child来选择，表示第9张后面的最后一张图片，实现以下

.item:nth-child(9)~.item{
  position: absolute;
  width: calc(100% / 3 - 1px);
  counter-increment: count;
  visibility: hidden;
  right: 0;
  bottom: 0;
}
.item:nth-child(9)~.item:last-child::after{
  visibility: visible;
  background-color: rgba(0,0,0,.2);
}
复制代码

这样就实现了纯 CSS 自动提示剩余图片的效果，演示以下

这里的 add 和 remove 是演示动态修改节点数量，与交互逻辑无关

完整代码可访问 list-counter (codepen.io)

5、其余初始化方式

在上一种实现方式中，咱们是手动指定从第 10 个元素开始计数的

.item:nth-child(9)~.item{
  /*从第10个开始计数*/
  counter-increment: count;
}
复制代码

其实，还有一种方式也值得一试，那就是直接指定计数器的初始值，默认为0，如今改成 -9 就能够了，实现以下

.list{
  /*...*/
  counter-reset: count -9; /*初始化为-9*/
}
复制代码

不同的初始化思路，剩下的就和以前同样的逻辑了，完整代码可访问 list-counter-reset (codepen.io)

6、总结和说明

这个案例到这里就结束了，一个低成本的 CSS 小技巧，虽然很少，可是很是实用，尤为是选择器的运用，说不定未来哪次就会用上了。CSS 计数器能够说是很是灵活和强大了，仔细挖掘应该还能实现更多实用的效果，这里总结一下：

九宫格布局若是不考虑兼容性优先使用 grid 布局
自适应正方形可使用 aspect-ratio 实现
遇到和序列有关的布局，优先考虑 CSS 计数器
灵活运用 CSS 选择器，**nth-child(n)**和 ~ 能够组合选择第 n 个之后的元素
能够指定从第 n 个元素开始计数
能够指定计数器的初始值
CSS 计数器没有兼容性问题，能够放心使用

若是以为还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤