Настройте разные размеры изображений друг на друга с помощью начальной загрузки

Question

У меня разный размер изображений, и я хочу настроить все из них в виде деления следующим образом https://imgur.com/a/9v76Kyj. В настоящее время я получил это https://imgur.com/a/pOJnIRh с этим кодом

#box-image-div{
  /* Prevent vertical gaps */
  line-height: 0;

  -webkit-column-count: 20;
  -webkit-column-gap:   0px;
  -moz-column-count:    20;
  -moz-column-gap:      0px;
  column-count:         20;
  column-gap:           0px;  
}

#box-image-div img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}


<div id="box-image-div">


<img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/112.png">
<img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/118.png">
<img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/113.png">
<img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/115.png">
<img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/114.png">
<img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/116.png">
<img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/117.png">
<img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/115.png">
<img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/114.png">
<img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/116.png">



</div>