Masonry (Desandro) not stacking responsive images well

I’ve been working on making my portfolio website responsive, using masonry as well (not a WP plugin, from this website: https://masonry.desandro.com/). One of the problems I’m having is that the images that are being stacked don’t always stack the way I want them to. First it looks like this:
https://cl.ly/image/3D0j1H0i271O

And after I refresh the website, or resize the window, it does stack properly:
https://cl.ly/image/1K3C2l083x3W
All images are in percentages so they scale according to window size, and I’m using code that should make sure masonry only starts stacking after all the images are loaded:

var $container = $('#container');
// initialize Masonry after all images have loaded
$container.imagesLoaded( function() {
  $container.masonry();
});

Anyone have an idea what’s going on?

My website to see it live: https://www.rengintumer.com

I think it does work well on 1920×1080 resolution but I’m not entirely sure.