CSS 計數器實現九宮格自動提示超出數量

常常在某些 app 中看到這樣的九宮格設計。當縮略圖不足 9 張時，正常排列，當超過 9 張時，會提示還剩多少張，以下：

如何使用純 CSS 實現這一效果呢？一塊兒來看看吧

1、九宮格佈局

佈局就很簡單了，一個很普通的九宮格佈局，這裏使用 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張時自動提示剩餘張數呢？接着往下看

2、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. 這個數字不是超出圖片的數量，而是總數

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 計數器能夠說是很是靈活和強大了，仔細挖掘應該還能實現更多實用的效果，這裏總結一下：

1. 九宮格佈局若是不考慮兼容性優先使用 grid 佈局
2. 自適應正方形可使用 aspect-ratio 實現
3. 遇到和序列有關的佈局，優先考慮 CSS 計數器
4. 靈活運用 CSS 選擇器，**nth-child(n)**和 ~ 能夠組合選擇第 n 個之後的元素
5. 能夠指定從第 n 個元素開始計數
6. 能夠指定計數器的初始值
7. CSS 計數器沒有兼容性問題，能夠放心使用

若是以爲還不錯，對你有幫助的話，歡迎點贊、收藏、轉發❤❤❤