A library help you to build Google like Image Gallery. Vanilla Javascript

  • By Anh Trinh
  • Last update: Apr 25, 2022
  • Comments: 1


A library help you to build Google like Image Gallery. Vanilla Javascript

DEMO http://ptgamr.github.io/google-image-layout/

TUTORIAL http://trinhtrunganh.com/2014/09/12/google-image-layout.html


Init via Data Attribute

very simple, add your markdown as bellow

<div class="google-image-layout" data-google-image-layout data-max-height="150">
	<img src="http://media-cache-ec0.pinimg.com/736x/d6/1f/6f/d61f6ff7dc676504170e6233fc6373e6.jpg"/>
	<img src="http://media-cache-ec0.pinimg.com/736x/3d/e7/9b/3de79b852892d20cc55c51a3d5bdea95.jpg"/>
	<img src="http://media-cache-ak0.pinimg.com/236x/ef/c9/1f/efc91fba944f62dfff1f7ba8c68c354a.jpg"/>
	<img src="http://media-cache-ak0.pinimg.com/236x/b0/c7/74/b0c7741ecb01dac741423164619160ef.jpg"/>

####data-max-height (default 120) The maximum height of images in the gallery


####.align(element) element the gallery container which contains images

***Important Notice

Thís plugin requires the image's width and height have to be known in prior to initialization. If you already have that information, put data-width & data-height to your image tags.

Otherwise, please consider using imagesLoaded to load the images first

var imgLoad = imagesLoaded( document.querySelector('body') );

imgLoad.on( 'progress', function( instance, image ) {
  image.img.setAttribute('data-width', image.img.offsetWidth);
  image.img.setAttribute('data-height', image.img.offsetHeight);

imgLoad.on( 'done', function( instance ) {

Todo List

  • Responsive support
  • Append images (for infinite scrolling, loadmore button)
  • More configuration options


MIT license




  • 1

    Error on page load

    imagesloaded.pkgd.min.self-a1d38a7….js?body…:8 Uncaught TypeError: Cannot read property 'length' of null
        at o (imagesloaded.pkgd.min.self-a1d38a7….js?body…:8)
        at s (imagesloaded.pkgd.min.self-a1d38a7….js?body…:8)
        at s (imagesloaded.pkgd.min.self-a1d38a7….js?body…:8)
        at main.self-98f044b….js?body=1:1