Do you want something like this?, you don´t need javascript

https://codepen.io/marcosefrem/pen/KKXELPy

<ul>
   <li>
     <img src="https://picsum.photos/500/400" alt="">
   </li>
   <li>
     <img src="https://picsum.photos/100/50" alt="">
   </li>
   <li>
     <img src="https://picsum.photos/200/200" alt="">
   </li>
   <li>
     <img src="https://picsum.photos/100/400" alt="">
   </li>
  <li>
     <img src="https://picsum.photos/500/400" alt="">
   </li>
   <li>
     <img src="https://picsum.photos/100/50" alt="">
   </li>
   <li>
     <img src="https://picsum.photos/200/200" alt="">
   </li>
   <li>
     <img src="https://picsum.photos/100/400" alt="">
   </li> 
</ul>

<style>
 ul {
       column-count: 3;
      column-gap: 1.25rem;
    }
    li {
       break-inside: avoid-column;
      position: relative;
      display: inline-block;
      width: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
    }
li img {width:100%; object-fit:cover}


</style>

For this fairly straightforward layout where it must be known that the aspect ratios of the two bigger images are the same as are the aspect ratios of the two smaller images you could use CSS two columns:

ul {
  columns: 2;
  width: 50vw;
  font-size: 4px;
}

li img {
  width: 100%;
  height: auto;
  margin: 2px 0 2px 0;
}

<ul>
  <li><img src="https://picsum.photos/id/1016/100/50"></li>
  <li><img src="https://picsum.photos/id/1015/200/300"></li>
  <li><img src="https://picsum.photos/id/1016/200/300"></li>
  <li><img src="https://picsum.photos/id/1015/100/50"></li>
</ul>

Note - the vertical gap depends on font-size, hence the 4px to match the 2x2px of the margins. Obviously you will want to adjust this and the width of the whole thing to suit your particular needs.

Also can use from divs instead ul and li:

.container {
  width: 300px;
  grid-template-rows: 100px 100px 100px;
  display: grid;
  grid-template-areas: 'one tow' 'tree tow' 'tree four';
  grid-gap: 10px;
}

img {
  width: 100%;
  height: 100%;
  margin-block-end: 0.25rem;
}

.item1 {
  grid-area: one;
}

.item2 {
  grid-area: tow;
}

.item3 {
  grid-area: tree;
}

.item4 {
  grid-area: four;
}

<div class="container">
  <div class="item1">
    <img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" alt="">
  </div>
  <div class="item2">
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="">
  </div>
  <div class="item3">
    <img src="https://s4.uupload.ir/files/717195_346_g0du.jpg" alt="">
  </div>
  <div class="item4">
    <img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt="">
  </div>
</div>