Вот красивое решение. В скрипте можно указать, какое количество элементов выводить. Когда все элементы уже показаны, то кнопка скрывается. Примеры:
Решение на JavaScript(jQuery). 100 элементов
$(document).ready(function() {
var list = $(".wrapper-boxes .box");
var numToShow = 10; //сколько показывать элементов
var button = $("button");
var numInList = list.length;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function() {
var showing = list.filter(':visible').length;
list.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = list.filter(':visible').length;
if (nowShowing >= numInList) {
button.hide();
}
});
});
.wrapper-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
counter-reset: albumList;
}
.box {
position: relative;
margin: 5px;
width: 100px;
height: 100px;
background-color: orange;
border-radius: 3px;
}
button {
width: 550px;
line-height: 40px;
background-color: orange;
border: 4px solid #fff;
color: #fff;
}
.box:after {
counter-increment: albumList;
content: counter(albumList);
position: absolute;
top: 10%;
left: 10%;
padding: 4% 7%;
border-radius: 5%;
border: 1px solid lightgray;
text-align: center;
background-color: white;
font-size: 2vw;
font-weight: bold;
font-family: monospace;
box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button>Показать ещё 10</button>
Другое количество элементов (не кратное десяти)
$(document).ready(function() {
var list = $(".wrapper-boxes .box");
var numToShow = 10; //сколько показывать элементов
var button = $("button");
var numInList = list.length;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function() {
var showing = list.filter(':visible').length;
list.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = list.filter(':visible').length;
if (nowShowing >= numInList) {
button.hide();
}
});
});
.wrapper-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
counter-reset: albumList;
}
.box {
position: relative;
margin: 5px;
width: 100px;
height: 100px;
background-color: orange;
border-radius: 3px;
}
button {
width: 550px;
line-height: 40px;
background-color: orange;
border: 4px solid #fff;
color: #fff;
}
.box:after {
counter-increment: albumList;
content: counter(albumList);
position: absolute;
top: 10%;
left: 10%;
padding: 4% 7%;
border-radius: 5%;
border: 1px solid lightgray;
text-align: center;
background-color: white;
font-size: 2vw;
font-weight: bold;
font-family: monospace;
box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button>Показать ещё 10</button>
Решение на нативном JavaScript
document.addEventListener("DOMContentLoaded", function() {
const limit = 10;
const nextOpen = (wrapper, button) => {
const boxs = wrapper.querySelectorAll(".box"),
len = boxs.length - 2,
endBox = wrapper.querySelector(".nextstop"),
index = [...boxs].indexOf(endBox) + limit;
if (endBox) endBox.classList.remove("nextstop");
if (index < len) boxs[index].classList.add("nextstop");
else button.remove()
}
document.querySelectorAll(".wrapper-boxes").forEach(wrapper => {
const button = wrapper.nextElementSibling;
button.addEventListener("click", nextOpen.bind(null, wrapper, button));
nextOpen(wrapper, button);
})
});
.wrapper-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
counter-reset: albumList;
}
.box {
position: relative;
margin: 5px;
width: 100px;
height: 100px;
background-color: orange;
border-radius: 3px;
}
button {
width: 550px;
line-height: 40px;
background-color: orange;
border: 4px solid #fff;
color: #fff;
}
.box:after {
counter-increment: albumList;
content: counter(albumList);
position: absolute;
top: 10%;
left: 10%;
padding: 4% 7%;
border-radius: 5%;
border: 1px solid lightgray;
text-align: center;
background-color: white;
font-size: 2vw;
font-weight: bold;
font-family: monospace;
box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
}
.box.nextstop~.box {
display: none;
}
<div class="wrapper-boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button>Показать ещё 10</button>