<div class="container_image"></div>

<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>