<div class="container">
  <div class="masonry">
    <div class="brick"><img src="https://unsplash.it/570/270?image=1"></div>
    <div class="brick"><img src="https://unsplash.it/570/390?image=32"></div>
    <div class="brick"><img src="https://unsplash.it/585/370?image=33"></div>
    <div class="brick"><img src="https://unsplash.it/435/335?image=34"></div>
    <div class="brick"><img src="https://unsplash.it/465/235?image=35"></div>
    <div class="brick"><img src="https://unsplash.it/590/215?image=36"></div>
    <div class="brick"><img src="https://unsplash.it/640/235?image=37"></div>
    <div class="brick"><img src="https://unsplash.it/355/305?image=8"></div>
    <div class="brick"><img src="https://unsplash.it/390/260?image=39"></div>
    <div class="brick"><img src="https://unsplash.it/360/345?image=10"></div>
    <div class="brick"><img src="https://unsplash.it/435/185?image=11"></div>
    <div class="brick"><img src="https://unsplash.it/650/190?image=12"></div>
    <div class="brick"><img src="https://unsplash.it/495/310?image=13"></div>
    <div class="brick"><img src="https://unsplash.it/470/320?image=14"></div>
    <div class="brick"><img src="https://unsplash.it/455/250?image=15"></div>
    <div class="brick"><img src="https://unsplash.it/375/375?image=16"></div>
    <div class="brick"><img src="https://unsplash.it/415/215?image=17"></div>
    <div class="brick"><img src="https://unsplash.it/550/335?image=18"></div>
    <div class="brick"><img src="https://unsplash.it/445/355?image=19"></div>
    <div class="brick"><img src="https://unsplash.it/450/420?image=20"></div>
    <div class="brick"><img src="https://unsplash.it/585/360?image=21"></div>
    <div class="brick"><img src="https://unsplash.it/380/185?image=22"></div>
    <div class="brick"><img src="https://unsplash.it/580/300?image=23"></div>
    <div class="brick"><img src="https://unsplash.it/420/340?image=24"></div>
    <div class="brick"><img src="https://unsplash.it/605/270?image=25"></div>
    <div class="brick"><img src="https://unsplash.it/520/415?image=26"></div>
    <div class="brick"><img src="https://unsplash.it/575/210?image=27"></div>
    <div class="brick"><img src="https://unsplash.it/400/260?image=28"></div>
    <div class="brick"><img src="https://unsplash.it/435/355?image=29"></div>
  </div>
</div>

<button class="fadeIn">Fade in again</button>

<h3>Loading images...</h3>

/* Grid styling */
.container {
  width: 100%;
  display: block;
  margin: 0 auto;
}
.masonry {
  column-count: 2;
  column-gap: 5px;
}
@media (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}
@media (min-width: 992px) {
  .masonry {
    column-count: 4;
  }
}
@media (min-width: 1199px) {
  .masonry {
    column-count: 5;
  }
}
.masonry .brick {
  box-sizing: border-box;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  counter-increment: brick-counter;
}
.masonry img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
}

/* Other styling */
body {
  font-family: sans-serif;
  font-size: 1.5em;
}
.fadeIn {
  font-size: 1.5em;
  padding: 0.5em;
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
}
h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

function fadeInRandomly() {
  gsap.fromTo("img", {autoAlpha:0}, {
    autoAlpha: 1, 
    overwrite: true, 
    stagger: { 
      from: "random", 
      amount: 1 
    }
  });

  gsap.to("h3", {autoAlpha: 0});
}



// Wait for the images to load
var imgs = gsap.utils.toArray(document.images),
    len = imgs.length,
    counter = 0;

imgs.forEach(function(img) {
  if(img.complete) {
    incrementCounter();
  } else {
    img.addEventListener('load', incrementCounter, false);
  }
});

var loaded = false;
function incrementCounter() {
  counter++;
  if(counter === len) {
    fadeInRandomly();
    loaded = true;
  }
}

// If images don't load in time, fade in anyway
gsap.delayedCall(3, function() {
  if(!loaded) {
    fadeInRandomly();
  }
});

document.querySelector(".fadeIn").addEventListener("click", fadeInRandomly);