What is the name of this effect? [closed]

var content = document.getElementById("container");
var content = document.getElementById("content");
var buttons = document.querySelectorAll("#menu input[data-color]");

var random = function (min, max) {
  return Math.floor(Math.random() * max) + min;
}

var width = 240;
var boxes = [];
var cores = ["teal", "indigo", "deep-orange", "blue-gray"];
for (var indice = 0; indice < 36; indice++) {
  var cor = cores[indice % 4];
  var box = document.createElement("div");
  box.classList.add("box");
  box.classList.add(cor);
  box.style.width = (width - 10) + "px";
  box.style.height = random(120, 180) + "px";
  content.appendChild(box);
  boxes.push(box);
}

var currentWidth = 0;
var onWindowResize = function (force) {
  var newWidth = window.innerWidth - window.innerWidth % width;
  if (currentWidth != newWidth || force) {
    content.style.width = newWidth + "px";
    currentWidth = newWidth;

    var colunas = [];
    var limite = currentWidth / width;
    for (var indice = 0; indice < limite; indice++) {
      colunas.push(0);
    } 

    boxes.forEach(function (box, indice) {
      if (!box.classList.contains("hide")) {
        var minimo = Math.min.apply(null, colunas);
        var indice = colunas.indexOf(minimo);
        console.log(box.offsetHeight);
        box.style.top = colunas[indice] + "px";
        box.style.left = (width * indice) + "px";      
        colunas[indice] += box.offsetHeight + 10;
      }
    });

    console.log(colunas);
  }	
}

var onColorClick = function (event) {
  var cor = event.target.dataset.color;
  var todos = !cor;
  boxes.forEach(function (box, indice) {
    if (!todos && !box.classList.contains(cor)) {
      box.classList.remove("show");
      box.classList.add("hide");
    } else if (box.classList.contains("hide")) {
      box.classList.remove("hide");
      box.classList.add("show");
    }    
  });
  onWindowResize(true);
}

window.addEventListener("resize", function () {
  onWindowResize(false);
});

[].forEach.call(buttons, function (button, indice) {
  button.addEventListener("click", onColorClick);	
});

onWindowResize(false);

html, body {
  overflow: auto;
}

#menu {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 40px;
  padding: 10px;
  text-align:center;
  background-color: gainsboro;
  box-shadow: 0px 0px 10px black;
  box-sizing: border-box;
}

#container {
  position: fixed;
  overflow: auto;
  top: 40px;
}

#content {
  position: absolute;
  top: 0px;
}

#container, #content {
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
}

.box {
  position: absolute;
  border-radius: 5px;
  box-shadow: 0px 0px 5px black;
  margin: 5px;
  transition-property: top, left;
  transition-duration: 0.5s;
  transition-timing-function: linear;  
  
  -webkit-transition-property: top, left;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: linear;  
}

.hide {
  animation: hide 0.5s linear;
  animation-fill-mode: forwards;
  
  -webkit-animation: hide 0.5s linear;
  -webkit-animation-fill-mode: forwards;
}

.show {
  animation: hide 0.5s linear;
  animation-fill-mode: forwards;
  
  -webkit-animation: show 0.5s linear;
  -webkit-animation-fill-mode: forwards;
}

@keyframes hide {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes show {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@-webkit-keyframes hide {
  0% { -webkit-transform: scale(1); }
  100% { -webkit-transform: scale(0); }
}

@-webkit-keyframes show {
  0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1); }
}

.teal {
  background-color: #009688
}

.indigo {
  background-color: #3F51B5
}

.deep-orange {
  background-color: #FF5722
}

.blue-gray {
  background-color: #607D8B
}

<div id="menu">
  <input type="button" data-color="" value="Todas" />
  <input type="button" data-color="teal" value="Teal" />
  <input type="button" data-color="indigo" value="Indigo" />
  <input type="button" data-color="deep-orange" value="Deep Orange" />
  <input type="button" data-color="blue-gray" value="Blue Gray" />
</div>
<div id="container">
  <div id="content">

  </div>
</div>