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.
Update.
<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>
Codigo 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 las categorías que fueron seleccionadas, lo único que logro es que me traiga una sola categoría.
Alguna idea?
Documentacion: https://haltu.github.io/muuri/
nota: Las imagenes estan pegadas, la pagina no es asi.