jQuery砌体和基础5

Question

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

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

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

}）;

但这在F5中具有以下功能不起作用（砌体位于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元素的标记已更改，因此窗口调整大小目标已更改。 我尝试了许多不同的方法，但无法使其正常工作。

有问题的站点在这里 -需要单击“ Bilder far Adventure”。

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

Answer 1

好吧，我知道了。 使用window.dispatchEvent(new Event("resize"))代替窗口调整大小：

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

作品！

Answer 2

我正在使用Jekyll进行内容站点项目，并且在进行研究时想出了一个可能的答案：

我建议你去做Zurb Way