Skip to content
← Back to Community
🖼️ Fluid Grid of Random Images! 🖼️
Profile icon
RolandJLevy

I set myself the challenge of making a fluid grid of random images which is fully responsive on any device 💻

All the images are generated on the fly using the Unsplash API and are resized using media queries. Try resizing the browser to see the fluidity of the grid 🍯

Features 💡

  • Choose any number of images (from 1 to 999!) and press enter
  • The input field is fully validated with error handling
  • Each random image is fetched from Unsplash API
  • All the images load into a scrollable container
  • Resize your browser to see media queries adjust the size of the images and number of columns per row
  • Click on an image to see full-size image on the Unsplash website
  • This is made from scratch with vanilla JavaScript and CSS - no frameworks or libraries
  • All works with just 80 lines of JavaScript! ⚡️
Voters
Profile icon
userSM
Profile icon
TylerArmstrong2
Profile icon
DynamicSquid
Profile icon
Coder100
Profile icon
Kookiez
Profile icon
zplusfour
Profile icon
python88
Profile icon
lightningrock
Profile icon
Leroy01010
Profile icon
StringentDev
Comments
hotnewtop
Profile icon
python88

hi bye

Profile icon
Coder100

goodbye network bandwidth!

Profile icon
RolandJLevy

@Coder100 hmmm... you're right, good point. I'll see if I can implement infinite scrolling. Do you think that's a good option or something else? I could use pagination instead but I find it clunky in terms of usability

Profile icon
python88

remember the ted talk you asked for a long time ago? Here it is! : https://www.youtube.com/watch?v=VMIpxqeoI1c @rjlevy

Profile icon
Coder100
Profile icon
RolandJLevy

Hi @python88, thanks for sharing the Ted talk. It was awesome!

Profile icon
python88
Profile icon
RolandJLevy

Hey @python88, how are you doing and how is your coding going?

Profile icon
python88

@rjlevy I just posted a Pokemon game. It's not finished, but can you check it out?

Profile icon
python88

Also, I noticed that a game called among us is getting popular. Do you know that [email protected]

Profile icon
Coder100

ahhh no do not spread it onto repl.it @python88

Profile icon
RolandJLevy

Sounds good @python88. Can you send me a link to your Pokemon game?

Profile icon
python88
Profile icon
RolandJLevy

Hi @python88, well done on your Pokemon game. I can see you spent a lot of time on it :)

Profile icon
python88
Profile icon
Kookiez

cool, nice!

Profile icon
RolandJLevy

Hi @OrangeJooce123, thanks! Any suggestions for improving or adding to it?

Profile icon
zplusfour

This is cool!

Profile icon
RolandJLevy

Hey @ZDev1, thanks! Any ideas for improvement?

Profile icon
zplusfour

@rjlevy no! it is very cool :)

Profile icon
python88

nice!

Profile icon
RolandJLevy

Hi @python88, thanks. How do you think it could be improved?

Profile icon
python88

maybe if there are alot of pictures, the images are a little bit smaller than if you had only a few. @rjlevy

Profile icon
RolandJLevy

Hi @python88, that's a good idea but might be a lot of work to implement :)

Profile icon
Bookie0

pretty cool!

Screen Shot 2020-10-12 at 8.07.22 PM

A tip could be to make is so that if the user chooses a number like 1 or 2 or 3, or another small number like that, the grid could kinda close around so that there's less of that white empty space! ;)

Profile icon
RolandJLevy

Hi @Bookie0, thanks for your feedback! It's a good idea although it might be a bit tricky to achieve. I'll take a look...

Profile icon
Bookie0

cool! :D @rjlevy

Profile icon
techde

Wow, it doesn't doesn't look responsive on the iPhone 7 though...

Profile icon
techde

It's an awesome project never the less!

Profile icon
RolandJLevy

@techde, ah thanks for your feedback. What do you see on your iPhone? I thought you would get something like this:

js-fluid-grid-of-images.rjlevy.repl.co_(iPhone 6_7_8 Plus) (1)

Profile icon
RolandJLevy

@techde thanks! :)

Profile icon
fuzzyastrocat

Pretty cool! Is it suppose to only crop/scale on the X-axis? I'm guessing yes because there's a vertical scrollbar, but just checking.

Profile icon
RolandJLevy

@fuzzyastrocat, good to hear from you! Yes, good point. The scaling only happens horizontally. People can load up to 999 images so vertical scaling wouldn't be possible.

Profile icon
fuzzyastrocat

@rjlevy Ah right, didn't think about that. Once again, nicely done!

Profile icon
RolandJLevy

@fuzzyastrocat thanks - it's good to have your positive feedback :)

Profile icon
fuzzyastrocat

@rjlevy No problem!

Profile icon
techde

@rjlevy I am 9 I dont have an iPhone I used the inspect tool which might look different...

Profile icon
fuzzyastrocat

@techde @rjlevy Interesting, I tried the inspect tool on Chrome and it seems to respond nicely.

Profile icon
techde

@fuzzyastrocat could be my computer...

Profile icon
fuzzyastrocat

@techde Or the browser

Profile icon
RolandJLevy