Responsive Photo Grid In Vanilla JavaScript – ImageRow.js

Category: Javascript , Layout | January 20, 2017
Author:rharter
Views Total:1,599 views
Official Page:Go to website
Last Update:January 20, 2017
License:MIT

Preview:

Responsive Photo Grid In Vanilla JavaScript – ImageRow.js

Description:

ImageRow.js is a pure Vanilla JS based photo grid library which gives you the ability to responsively re-arrange a set of images row by row while preserving their original aspect ratios.

How to use it:

Load the CSS file imagerow.css and JavaScript file imagerow.js into the html document.

<link rel="stylesheet" href="imagerow.css">
<script src="imagerow.min.js"></script>

Add your images to the grid rows as shown below:

<section class="image-row">
  <img src="1.jpg" />
  <img src="2.jpg" />
 </section>
 
<section class="image-row">
  <img src="3.jpg" />
  <img src="4.jpg" />
  <img src="5.jpg" />
 </section>
<section class="image-row">
  <img src="6.jpg" />
</section>

That’s it. The ImageRow.js will take care of the rest. Resize the browser window to see the magic and enjoy it.

You Might Be Interested In:


Leave a Reply