jquery - MixItUp 和 Masonry 不能一起工作

Question

我正在尝试同时使用 Masonry ( http://masonry.desandro.com/ ) 和 Mixitup ( http://mixitup.io/ )，但它们无法正常工作，因为它一次只显示一张图像并且整个布局被破坏。

我一直在进行大量搜索，但在这个问题上找不到太多内容。它在 MixItUp 网站上说某些 css 规则会产生问题，Masonry 的 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');
}