效果展示

绘制大致容器

gird简易布局,11个dd元素模拟图片

html
<dl class="view">
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>

css
dl,
dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
}
.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
}

counter计算属性展示数量

使用::before伪元素覆盖住图片，将counter计算的数量展示在::before元素中

counter

css
.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images;
}
.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
    counter-increment: images;
}
.view dd::before{
    content: "+"counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

counter已经将全部dd元素数量展示出来,可我们只需要超出第九个dd元素的数量,这要怎么做呢？

其实很简单，使用

伪类选择第九个dd元素后的兄弟元素

css
.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
}

.view dd:nth-child(9)~dd {
    counter-increment: images;
}

.view dd:nth-child(9) ~ dd::before{
    content: "+"counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

~ dd表示后面所有的dd元素

嘿嘿！只差将最后的元素移个位置了，可以使用定位

css
dl,
dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images;
    position: relative;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
}

.view dd:nth-child(9)~dd {
    width: 100px;
    counter-increment: images;
    position: absolute;
    right: 0;
    bottom: 0;
}

.view dd:nth-child(9)~dd::before {
    content: "+"counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

将超出第九个的所有元素定位至容器右下方

原生js实现点击展示

超出第九个的所有元素被定位在右下，利用js实现点击定位的元素则将元素去除定位属性

css
//去除定位 
.view dd.no-befter {
    position: static !important;
}

.view dd.no-befter::before {
    display: none !important;
} 

js
let dd = document.getElementsByTagName('dd'),
    len = dd.length;
dd[len - 1].onclick = () => {
    [].slice.call(dd).forEach(val => {
        val.classList.add('no-befter');
    })
}

counter另一种思维实现

counter实现九宫格，上面是使用counter默认从0开始。现在重新设置counter从-9开始计算。

css
dl,
dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images -9;
    position: relative;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
    counter-increment: images;
}

.view dd::before {
    content: counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

同理，超出第九个元素才展示数量，然后定位

css
dl,
dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images -9;
    position: relative;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
    counter-increment: images;
}

.view dd:nth-child(9)~dd:before {
    content: counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

后面的代码就不展示了，基本上是一样的。

所有代码保存在 github需要的自取。

最后

CSS::marker让文字序号不再呆板,counter配合::marker可以做有趣列表展示。

公众号:隔壁姥爷，求个关注❤️‍🔥