How to render virtualized gallery?

[lironezra]

Discussed in #279

^{Originally posted by lironezra April 10, 2022}
Hi friends :)

I'm trying to build a gallery with items like the image below I am using react-query to fetch the items with infinite-scrolling,
I want to achieve that with virtualized items.
Can I implement it with Raws (I've tried this approach without success...) or I need to use the Grid view?

Thanks for the help!

[em2724]

Hi, did you make any progress on this? I'm currently making a similar gallery and using the grid view as in the docs example. But because the columns aren't actually virtualised I'm thinking of changing to only virtualising the rows and wrapping each row in a div. Simpler to layout out the items in a row using flex-box or css grid. Did you continue using the grid view?

[hvdson]

any solutions to this? i'm working on a similar view with infinite scroll as well but the columns need to be responsive

[piecyk]

So what exactly is the issue here? You want to virtualize rows and columns, did you check the grid example here https://tanstack.com/virtual/v3/docs/examples/react/dynamic

[AlexAdvent]

Has any one implemented this?

[wan54]

For anyone looking for the answer this is the example, specifically the masonry, you should check out https://tanstack.com/virtual/latest/docs/framework/react/examples/variable.

[dango0812]

@wan54 @AlexAdvent
I've had a similar experience myself, and based on that, I'm currently working on an example using grid and ratio grid layout.
https://github.com/dango0812/tanstack-virtual-grid

[piecyk]

Nice! Looking forward to seeing what you come up with.

[dango0812]

You can check out the design used TanStack Virtual at https://tanstack-virtual-grid.vercel.app/.

It supports both a 1:1 & 16:9 aspect ratio!
I'll also be sharing an example that shows how to implement it with React Query and infinite scrolling.

[piecyk]

Sweet!