<style>
.container_image {display:none;}
#more {display:none;}
</style>
<div class="container_image">1</div>
<div class="container_image">2</div>
<div class="container_image">3</div>
<div class="container_image">4</div>
<div class="container_image">5</div>
<div class="container_image">6</div>
<div class="container_image">7</div>
<div class="container_image">8</div>
<div class="container_image">9</div>
<div class="container_image">10</div>
<div class="container_image">11</div>
<div class="container_image">12</div>
<div class="container_image">13</div>
<div class="container_image">14</div>
<div class="container_image">15</div>
<div class="container_image">16</div>
<button id="more">Еще</button>
<script>
function showImg(items,start,stop) {
for(var i = start; i < stop; i++){
items[i].style.display = "block";
}
}
var images = document.querySelectorAll(".container_image"),
moreBut = document.querySelector("#more"),
limit = 4, begin = 0, end = 0;
if(images.length < limit) {
end = images.length;
} else {
end = limit;
moreBut.style.display = "block";
};
showImg(images,begin,end);
moreBut.onclick = function() {
if(images.length > end) {
begin = end;
end = end + limit;
if(end>=images.length){
end = images.length;
moreBut.style.display = "none";
}
showImg(images,begin,end);
}
}
window.onscroll = function() {
if(moreBut.getBoundingClientRect().top < (document.body.clientHeight - 30))
moreBut.dispatchEvent(new Event('click')) ;
}
</script>
