Results show
Draw the approximate container
Gird simple layout,11 DD element simulation pictures
<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>
Copy the code
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;
}
Copy the code
counter
Calculate the number of attributes displayed
Overlay the image with the ::before pseudo-element to display the amount counter calculates in the ::before element
counter
.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;
}
Copy the code
Counter already shows the total number of DD elements, but we just need to exceed the number of dd elements in the ninth one, how do we do that?
It’s quite simple, using the: nth-Child pseudo-class to select the sibling after the ninth DD element
.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;
}
Copy the code
~ dd represents all subsequent DD elements
Hey hey! We just need to move the last element. We can use positioning
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;
}
Copy the code
Position all elements beyond the ninth to the bottom right of the container
Native JS implementation click display
All elements beyond the ninth are positioned to the lower right, and elements with js click-location are stripped of their positioning attributes
// Remove the location.view dd.no-befter {
position: static ! important;
}
.view dd.no-befter::before {
display: none ! important;
}
Copy the code
let dd = document.getElementsByTagName('dd'),
len = dd.length;
dd[len - 1].onclick = () = > {
[].slice.call(dd).forEach(val= > {
val.classList.add('no-befter'); })}Copy the code
Counter another way to think about it
Counter implements the nine grid, which uses counter from 0 by default. Now reset counter to count from -9.
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;
}
Copy the code
Similarly, display the quantity beyond the ninth element, and then position
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;
}
Copy the code
I won’t show you the following code, but it’s basically the same.
All code is saved on Github as needed.
The last
CSS::marker makes the text serial number no longer stiff,counter with ::marker can make an interesting list display.
Public number: next door grandpa, ask a concern ❤️🔥