关于前端:CSS-计数器实现九宫格自动提示超出数量

常常在某些 app 中看到这样的九宫格设计。当缩略图有余 9 张时，失常排列，当超过 9 张时，会提醒还剩多少张，如下：

如何应用纯 CSS 实现这一成果呢？一起来看看吧

一、九宫格布局

布局就很简略了，一个很一般的九宫格布局，这里应用 grid

<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
    ...
</ul>

这里正方形能够用 aspect-ratio 繁难实现，对应的 CSS 如下

.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*/}

成果如下

那么，如何实现在超过 9 张时主动提醒残余张数呢？接着往下看

二、CSS 计数器

提到序列，天然会想到 CSS 计数器，当初咱们加上计数器

.list{
  /*...*/
  counter-reset: count; /* 初始化 */
}

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

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

这样能够失去如下成果

数字是显示进去了，不过当初还有两个问题：

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

三、暗藏超出的图片

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

.item:nth-child(9)~.item{
  /* 抉择第 9 个当前的元素 */
  visibility: hidden;
}

这个中央是通过 visibility: hidden暗藏超过的图片，起因是该属性不会影响计数器的计算，如果应用 display:none 则会跳过计数

四、统计超过的数量

目前因为是从第 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)

五、其余初始化形式

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

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

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

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

不一样的初始化思路，剩下的就和之前一样的逻辑了，残缺代码可拜访 list-counter-reset (codepen.io)

六、总结和阐明

这个案例到这里就完结了，一个低成本的 CSS 小技巧，尽管不多，然而十分实用，尤其是选择器的使用，说不定未来哪次就会用上了。CSS 计数器能够说是非常灵活和弱小了，认真开掘应该还能实现更多实用的成果，这里总结一下：

1. 九宫格布局如果不思考兼容性优先应用 grid 布局
2. 自适应正方形能够应用 aspect-ratio 实现
3. 遇到和序列无关的布局，优先思考 CSS 计数器
4. 灵活运用 CSS 选择器，nth-child(n)和 ~ 能够组合抉择第 n 个当前的元素
5. 能够指定从第 n 个元素开始计数
6. 能够指定计数器的初始值
7. CSS 计数器没有兼容性问题，能够放心使用

如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤