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

MixItUp和Masonry没有合作

1 个答案: