Foro de elhacker.net

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:

<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.

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