How would you approach developing an infinite virtual grid?

I need to develop a component similar to vuetify’s v-virutal-scroll. The primary difference is that it needs to display a grid of items and not a list.

To simplify matters:

  1. assume every item contains an image.
  2. the height of each row will be the same
  3. the aspect ratio of the original image will remain the same. i.e. the width of each item will be different.

I had an easy time developing this component when #3 was not a factor and I could assume that each item was the same width. I could easily compute the number of columns and therefore the total height. I then just needed to respond to scroll and resize events, determine what items were visible, and set their top/left coordinate based on what row & column I knew they were in.

However, in order to do this now, I need to know what the natural width of an image is based on height or determine what the aspect ratio is.

I am struggling a bit to figure out how to structure my code.

One thought I had was to:

  1. insert an item
  2. let it render with it’s fixed height
  3. inquire what it’s width is
  4. if the width puts it beyond the right edge, animate it down to the next row
  5. go back to #1 until I am below the visible area

As the user scrolls down, I would need to detect when they had scrolled to the bottom, determine if there are any more items to display, and go back to #1

In order to support scrolling up and because I will not be able to keep images in memory if they are not visible (there will be thousands), I will be able to keep track of the aspect ratio of each item, allowing the computations in #3 and #4 to be bypassed or simplified.

I cannot determine the total height since I cannot be sure how many items will fit on a row until the user were to scroll to the end.

One thing I am uncertain of…how can I know when an item has finished rendering?

I would love to know what people thought about this and if anyone had better ideas.

Have you tried this? Virtual Scrolling Grid For Vue.js - Vue Script