masonry-wall with images of variable and unknown height

[andyvig]

I had a question about this note from the vue-masonry-wall documentation:
This library intentionally doesn't handle elements with dynamically changing height, as this would cause constant changes of the column distribution. As a consequence, the initial height of items is used. For images, specifying aspect ratios can prevent unbalanced distributions.

Does that mean we have to know the height (or aspect ratio) of all the images before we render them? We don't have that, which seems like a really common scenario. So I'm wondering if you have any recommendation for how to handle that, or if we're using this incorrectly.

Here's a snippet of how we're using it, and masonry-wall doesn't seem to be working correctly:

            <masonry-wall :items="allImages" minColumns="4">
                <template #default="{ item, index }">
                  <div>
                      <a lang="en" hreflang="en" data-fancybox="gallery" :href="`${contentBaseUri}/images/full/${item}`">
                        <img :src="`${contentBaseUri}/images/${item}`" />
                      </a>
                  </div>
                </template>
              </masonry-wall>

[DerYeger]

Yes, this is a limitation of the component to ensure a stable column distribution.

One approach would be to limit yourself to a list of fixed aspect ratios and constrain your images as required.