jQuery premier filtre de Isotope ne

Question

anime J'utilise le filtrage Isotope avec la maçonnerie sur ce site:

http://ihavepinkhair.com/wp/blog/

Le filtre fonctionne très bien et il anime après le premier filtre très bien, mais je suis détails personne et je ne peux pas oublier le fait que le premier filtre ne s'anime pas correctement.

Mon app.js ressemble à ceci:

jQuery(document).ready(function($) { 

// init Masonry 
var $gridMason = $('.grid-mason').masonry({ 
    // options 
    itemSelector: '.grid-item', 
    columnWidth: '.grid-sizer', 
    percentPosition: true, 
    transitionDuration: '0.8s' 
}); 

// layout Masonry after each image loads 
$gridMason.imagesLoaded().progress(function() { 
    $gridMason.masonry('layout'); 
}); 

// filtering 
$('.filter-button-group').on('click', 'a', function(e) { 
    e.preventDefault(); 
    var filterValue = $(this).attr('data-filter'); 
    $gridMason.isotope({ filter: filterValue }); 
}); 

}); 

Suis-je manque quelque chose?

Merci, Jared

Answer 1

Maçonnerie et Isotope sont des scripts séparés et non utilisés ensemble. Isotope a une disposition de "maçonnerie" qui n'est pas maçonnerie.js et il peut filtrer et trier tandis que masonry.js ne peut pas filtrer ou trier. Vous initialisez vos éléments d'abord avec masonry.js, puis essayez de filtrer avec isotope.js qui ne se charge qu'après avoir cliqué sur le premier bouton de filtre. Débarrassez-vous de masonry.js et utilisez isotope.js seulement.

jQuery(document).ready(function($) { 

// init Masonry 
var $gridMason = $('.grid-mason').isotope({ 
// options 
itemSelector: '.grid-item', 
masonry: { 
columnWidth: '.grid-sizer' 
}, 
percentPosition: true, 
transitionDuration: '0.8s' 
}); 

// layout Masonry after each image loads 
$gridMason.imagesLoaded().progress(function() { 
$gridMason.isotope('layout'); 
}); 

// filtering 
$('.filter-button-group').on('click', 'a', function(e) { 
e.preventDefault(); 
var filterValue = $(this).attr('data-filter'); 
$gridMason.isotope({ filter: filterValue }); 
}); 

});