jQuery를 동위 원소의 첫 번째 필터는이 사이트에 벽돌로 필터링 동위 원소를 사용하고

Question

애니메이션되지 않습니다

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

필터가 잘 작동하고 잘 최초의 필터 이후 애니메이션,하지만 난 해요 세부 사람과 나는 첫 번째 필터가 제대로 움직이지 않는다는 사실을 극복 할 수 없다.

내 app.js는 다음과 같습니다

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 }); 
}); 

}); 

암 I없는 뭔가를?

덕분에, 자레드

Answer 1

벽돌과 동위 원소는 별도의 스크립트입니다 아니라 함께 사용. Isotope는 masonry.js가 아닌 "masonry"레이아웃을 가지고 있으며 masonry.js가 필터링하거나 정렬 할 수없는 동안 필터링하고 정렬 할 수 있습니다. 첫 번째 항목을 masonry.js로 초기화 한 다음 첫 번째 필터 버튼을 클릭 한 후에 만로드되는 isotope.js로 필터링하려고합니다. masonry.js를 제거하고 isotope.js 만 사용하십시오.

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 }); 
}); 

});