MixItUp和砌體不在一起工作

Question

我試圖使用砌體（http://masonry.desandro.com/）和Mixitup（http://mixitup.io/）在一起，但它們不能正常工作，因爲它一次只顯示一個圖像並且整個佈局被破壞。

我一直在做很多搜索，但在這個問題上我找不到太多東西。它在MixItUp網站上說，某些css規則會產生問題，砌體的css規則是否會造成這種情況？或者我做錯了什麼？

此外，我知道Isotope可以實現同樣的事情，但我需要這個商業項目，我不能買它的許可證。

請讓我知道這一點。我將不勝感激任何幫助。謝謝。

Answer 1

你可以使用mixItUp回調函數。請檢查下面的例子。

// mixItUp function 
$('#grid').mixItUp({ 
     activeClass: 'on', 
     callbacks: { 
      onMixEnd: function(state){ 
       masonryGrid(); // ******* here call masonry function 
      } 
     } 
    }); 

function masonryGrid(){ 
    var $container = $('#container'); 
    // initialize 
    $container.masonry({ 
     itemSelector: '.item', 
     columnWidth: '.item', //as you wish , you can use numeric 
     isAnimated: true, 
    }); 
    $container.masonry('reloadItems'); 
    $container.masonry('layout'); 
}