Изображения разного размера настраиваются друг на друга в html css начальной загрузке

Question

Я хочу создать такую ​​страницу "https://imgur.com/a/PS0U15Q". В настоящее время я получил это" https://imgur.com/a/Qqq9Ebk". Но при таком подходе я не могу получить результат так, как хочу.

Я хочу: https://imgur.com/a/PS0U15Q Ток: https://imgur.com/a/Qqq9Ebk

Я пробовал этот код в настоящее время.

#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">
</div>

Answer 1

Это изображение, которое вы используете в качестве примера, получено из миллионного сценария, который, если он не является открытым исходным кодом, доступен для загрузки. Если вы хотите именно этого, посмотрите, как они делают это здесь: https://gitlab.com/MillionDollarScript/MillionDollarScript