Dynamic height for Masonry?

Question

css

https://codepen.io/asdasdddd/pen/MWYQEaN
There is a value height: 310vw;
I tried to set a dynamic height in JS, but
1 - we don't know the height until everything is rendered. It takes from a few seconds to several tens. On mobile phones it will take a long time to load and render.
2 - and after drawing, the height we get is the height, as if all the pictures were lined up as in the example, in one column, dividing this by 2-3-4 will not work, then the masonry may not fit into the screen and loading new ones pictures will be stopped.
3 - and one more thing, the loading of pictures is lazy, which means that in order to see the picture, it must get into the screen. That is, we do not know what height the pictures that have not yet hit the screen will have.
Set the height completely dynamic, as mentioned earlier, the browser pre-draws more than ahead.
That is, the distance to the footer will be as if everything is in one column.
at the moment I reserve a place for the picture in advance, the height is based on the average.
Alas, it is definitely not possible to calculate it due to the reasons described above.
It probably needs to be implemented in CSS somehow.
In the example without loading, it can be added with a simplesetTimeout(appendImgs, 5000)

Answer 1

The same one, but without js
https://codepen.io/Profesor08/pen/gObpmzO
But if you still want to use this buggy library, then make sure that the tags <img>have widthbothheight
<img src="image.png" width="1234" height="234">