JSFiddle - React, Tailwind, and code Playground
HTML
<nav class='buttons'>
<a class='type' id='all'>Todos</a> |
<a class='type' id='couros'>Couros</a> |
<a class='type' id='sinteticos'>Sintéticos</a>
</nav>
<div class="produtos-container">
<div id="a" class="imagem couros pos1">1</div>
<div id="b" class="imagem sinteticos pos2">2</div>
<div id="c" class="imagem sinteticos pos3">3</div>
<div id="d" class="imagem couros pos4">4</div>
</div>
CSS
.buttons{padding:20px 0}
.buttons a{cursor:pointer;}
.Bolding{color: red; text-decoration: underline;}
.produtos-container{width: 200px; position: relative;}
.imagem{display: block;width: 80px; height: 80px; margin: 10px;position:absolute;}
.couros{background: #122145;}
.sinteticos{background: #455123;}
.pos1{top:0;left:0;}
.pos2{top:0;left:80px;}
.pos3{top:80px;left:0;}
.pos4{top:80px;left:80px;}
JavaScript
var tipo="all";
var posicoes = [[0,0],[80,0],[0,80],[80,80]];
$('a.type').click(function(){
var elementos = ['a','b','c','d'];
var alterados = [];
$('a.type').removeClass('Bolding');
$(this).addClass('Bolding');
tipo=$(this).attr('id');
$(".imagem").each(function(){
if($(this).hasClass(tipo) || tipo=="all"){
$(this).fadeIn();
}else{
$(this).fadeOut();
var elId = $(this).attr('id');
var meuIndice = elementos.indexOf(elId);
elementos.splice(meuIndice,1);
}
})
for (i in elementos){
var meuIndice = elementos.indexOf(elementos[i]);
alvoX = posicoes[meuIndice][0];
alvoY = posicoes[meuIndice][1];
console.log('elemento '+elementos[i]+' deve ir para '+alvoX+' e '+alvoY);
$('#'+elementos[i]).animate({
left: alvoX+'px',
top: alvoY+'px',
}, 1000);
}
//console.log(elementos);
})