javascript - Jquery masonry 和基础 5

Question

我使用 Dylan Baumann 的 GitHub 存储库来集成 Masonry 和 Foundation。它在 Foundation 3 中效果很好，但在 Foundation 5 中效果不佳。在 F3 和 F5 上，我都得到了垂直堆叠的图像。

对于 F3，我使用以下 JS 来调整窗口大小并停止图像垂直堆叠:

$(".title").click(function () {
  $(window).trigger('resize'); 

});

但这在 F5 中不起作用(Masonry 位于 Foundation Accordion 元素内):

<script>
var $container = $('#container');
$container.imagesLoaded( function(){
    $container.masonry({
        itemSelector: '.box',
        isFitWidth: true
    }); 
});
$("#secondary div.row div.small-12.large-9.columns dl.accordion dd.accordion-navigation a").on("click", function () {
    $(window).trigger('resize'); 
});

F5 中 Accordion 元素的标记发生了变化，因此窗口调整大小目标也发生了变化。我尝试了很多不同的方法，但无法使其发挥作用。

The site in question is here - 需要点击“Bilder far Adventure”。

有人找到解决图像堆叠问题的方法吗？

Answer 1

好吧，我明白了。使用 window.dispatchEvent(new Event("resize")) 而不是窗口调整大小:

$("dd.accordion-navigation a").on("click", function () {
    window.dispatchEvent(new Event("resize"))
});

有效!