Galeria de imagenes grid.filter (librería Muuri) - Filtrado de img al hacer clic

[EnderJava]

Hola que tal? En esta oportunidad estoy realizando un pequeño portafolio web y buscando un poco en internet me encontré con esta librería bastante interesante.

Esta librería tiene algunas estructuras que tanto html y js que se deben seguir para poder llegar acabo sus animaciones,

En este caso estoy tratando de realizar el proceso de filtrado con grid.filter().

Código html: En este caso, estoy usando el parámetro "data-(atributo)" para llamar a las categorías por su atributo es justo data-categoria="" ya que los demás son otros atributos que usare en otro momento.

HTML:

Código (html4strict) [Seleccionar] Expandir


<div class="categorias" id="categorias">

                       <a href="#" class="text"> All Categories</a>
                       <a href="#">Graphic Design</a>
                       <a href="#">Web Design</a>
                       <a href="#">Sketches</a>

                   </div>
</div>
<div id="contenedor2">
<section class="grid" id="gridjs">


   <div class="item"
 data-categoria="GraphicDesign"
 data-tipo="Graphic design PSD illustrator art comic"
  data-description="Art | PSD | illustrator">

   <div class="item-content">
    <img src="imgport/Alaz.png" alt="">
   </div>
   </div>
   <div class="item"
   data-categoria="GraphicDesign"
    data-tipo="Graphic designart PSD illustrator art comic"
    data-description="Art  illustrator  Comic">
   <div class="item-content">
    <img src="imgport/alaz3.png" alt="">
   </div>
 </div>


 <div class="item"
 data-categoria="GraphicDesign"
 data-tipo="Graphic design art PSD  music party"
 data-description="Photo | PSD | Party">
   <div class="item-content">
    <img src="imgport/Photo-Enveroiment.png" alt="">
   </div>
 </div>

 <div class="item"
 data-categoria="GraphicDesign"
 data-tipo="Graphic design Photo person PSD stone"
  data-description="Photo | illustrator | fresh air" class="GraphicDesign">
   <div class="item-content">
    <img src="imgport/Mujer.png" alt="">
   </div>
 </div>

 <div class="item"
 data-categoria="GraphicDesign"
 data-tipo="Graphic design art PSD comic "
 data-description=" Art | illustrator - PSD | City">
   <div class="item-content">
    <img src="imgport/Photo - City.png" alt="">
   </div>
 </div>

 <div class="item"
 data-categoria="WebDesign"
 data-tipo="Sketches Website Boceto"
 data-description=" Briefcase design | Website">
   <div class="item-content">
    <img src="imgport/Web-design.png" alt="">
   </div>
 </div>
 <div class="item"
 data-categoria="Sketches"
 data-tipo="Sketches Website Boceto"
 data-description=" Briefcase design | Website">
   <div class="item-content">
    <img src="imgport/Sketche.png" alt="">
   </div>
 </div>

Código JS: La librería tiene diferentes formas de ser ejecuta, en tal caso lo único que busco es cuando le de a los enlaces, estos me devuelvan solo las imágenes de esa categoría seleccionada.

Código (javascript) [Seleccionar] Expandir

const grid = new Muuri('.grid', {

layout: {

   rounding: false
}

 });


window.addEventListener('load', () => {

grid.refreshItems().layout();
document.getElementById('gridjs').classList.add('loadimg'); /*Carga todas las imagenes con una pequeña transicion css*/

const enlace = document.querySelectorAll('#categorias a');
enlace.forEach((catego) =>  {

/*Obtengo las categorias por medio queryselector y luego paso un foreach para ir recogiendo las imagenes respectivas*/
   catego.addEventListener('click' ,  (evento) => {

evento.preventDefault();

console.log(enlace);


   grid.filter('[data-categoria="GraphicDesign"]');
/*Obtengo solo las categorias las imagenes de GraphicDesign*/

});

});

});



Si alguien ha trabajado con esta librería, queria saber como puedo filtrar las imágenes cuando le haga click a un enlace y que solo me traiga la categoría que fue seleccionada y me devuelva solo los atributos que contenga esa categoría. Lo único que logro es que me traiga una sola categoría.

Alguna idea?

Documentacion: https://haltu.github.io/muuri/

IMG de muestra: https://i.stack.imgur.com/hUhPp.jpg
Cuando las categorias se desaparecen y solo trae la categoría de GraphicDesign: https://i.stack.imgur.com/Trlh1.jpg