Google Images Style Thumbnail Grid with Pure JavaScript – FlexImages

Preview:

Description:

FlexImages is a simple vanilla JavaScript library to create a responsive fluid thumbnail gallery that supports images, videos, iframes, plain text and more. Inspired by Flickr and Google Images.

More features:

• Image / iFrame lazy load.
• AJAX support for infinite scrolling.
• Fully responsive for any devices.

How to use it:

Include the flex-images.css and flex-images.js in the document.

<link rel="stylesheet" href="flex-images.css">
<script src="flex-images.js"></script>

Insert a set of images into the document. Use data-w and data-h attributes to specify the width / height of the thumbnails.

<div id="demo" class="flex-images">
  <div class="item" data-w="219" data-h="180"><img src="1.jpg"></div>
  <div class="item" data-w="279" data-h="180"><img src="2.jpg"></div>
  <div class="item" data-w="270" data-h="180"><img src="3.jpg"></div>
  <div class="item" data-w="270" data-h="180"><img src="4.jpg"></div>
  <div class="item" data-w="147" data-h="180"><img src="5.jpg"></div>
  <div class="item" data-w="276" data-h="180"><img src="6.jpg"></div>
  ...
</div>

Initialize the thumbnail gallery.

new flexImages({selector: '#demo', rowHeight: 140});

Available options.

new flexImages({
// Required selector for container or DOM element that holds the individual images/objects.
selector: '#demo',
// Selector of the individual image/object containers.
container: '.item',
// Selector of the image/object inside a container.
object  'img',
// Maximum height of a row.
rowHeight: 180,
// Maximum number of rows to display. Images/Objects exceeding this row are hidden.
maxRows: null,
// Hide incomplete last row of images/objects.
truncate: false 
});