砌体和基金会 5.

Jquery Masonry and Foundation 5

本文关键字：基金会      更新时间：2023-09-26

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

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

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

}）;

但这在 F5 中不适用于以下内容（砌体在基础手风琴元素中）：

<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 中折叠元素的标记已更改，因此窗口调整大小目标已更改。我尝试了许多不同的方法，但无法使其工作。

有问题的网站在这里 - 需要点击"比尔德远冒险"。

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

好的，

我想通了。使用window.dispatchEvent(new Event("resize"))而不是窗口大小调整：

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

工程！

我正在使用 Jekyll 做一个内容网站项目，当我在做研究时，我想出了一个可能的答案：

我建议你以祖尔布的方式去做

相关文章：