Question

我试图在Masonry jQuery布局中包含FlexSlider库。但是，我无法识别FlexSlider的正确高度。我知道我在使用imagesLoaded脚本时显然做错了。

我已经正确链接了imagesLoaded并尝试了几乎所有加载顺序的组合。

如何让FlexSlider和Masonry一起工作？提前谢谢！

现在，我在文档就绪函数中加载了以下脚本：

var $container = $('#masonry'); 

        $container.imagesLoaded( function() {
            $container.masonry({
                itemSelector: '.item',
                gutter: 25
            });
        });

    $('.multiSlide').flexslider( {
            slideshow : true,
            animation : 'slide',
            pauseOnHover: true,
            animationSpeed : 400,
            smoothHeight : true,
            directionNav: true,
            controlNav: false,
            prevText : '<span class="fa fa-caret-left"></span>',
            nextText : '<span class="fa fa-caret-right"></span>'
    });

Answer 1

这不是一个很好的解决方案，但我使用setTimeout（）解决了同样的问题，因此Flexslider首先触发：

var $container = $('#masonry'); 

function loadMasonry(){
    $container.imagesLoaded( function() {
        $container.masonry({
            itemSelector: '.item',
            gutter: 25
        });
    });
}

setTimeout(loadMasonry, 500);

$('.multiSlide').flexslider( {
    slideshow : true,
    animation : 'slide',
    pauseOnHover: true,
    animationSpeed : 400,
    smoothHeight : true,
    directionNav: true,
    controlNav: false,
    prevText : '<span class="fa fa-caret-left"></span>',
    nextText : '<span class="fa fa-caret-right"></span>'
});

我知道必须有一个更好的方法来做到这一点，但它似乎可以做到这一点，直到我找出更好的东西：P

Flexslider和Masonry - imagesLoaded问题

1 个答案: