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:
- assume every item contains an image.
- the height of each row will be the same
- 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:
- insert an item
- let it render with it’s fixed height
- inquire what it’s width is
- if the width puts it beyond the right edge, animate it down to the next row
- 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.