Skip to main content

May 28

After a few days of figuring it out, I got the image gallery layout that I want for the site to work correctly. You can see it in action in the video at the top of this post. It has some mild NSFW due to the artwork I used as examples (some of my commissions), so I think you have to go directly to YouTube to view it.

It takes a *lot* more work than it might seem; basically it's arranged into rows of div elements, but you need to do several things:

- Dynamically calculate the height for each row (it's not the same)

- Compute a change map every time the window is resized and process that map in a specific order depending on whether the window has become larger or smaller

- Keep a record of every image's original aspect ratio so you can size it correctly, essential for making these nice neat equal-width rows

I'll probably write a more detailed explanation later, let me know if you'd like that (and if you want to see the code for it).