同位素仅在过滤或调整浏览器窗口大小后显示答案

【问题标题】：Isotope only shows up after filtering or resizing browser window同位素仅在过滤或调整浏览器窗口大小后显示
【发布时间】：2013-04-01 20:26:58
【问题描述】：

我正在使用Metafizzy's Isotope 来显示我的wordpress 帖子，并且容器不会显示我的任何项目，直到我采取一些其他操作（如过滤或调整窗口大小）.. 然后它“唤醒”并像往常一样发挥作用。这仅在 Chrome 中发生。有没有人经历过或知道解决方案？

【问题讨论】：

你能显示你的代码吗？使用它应该没有任何问题。

标签： jquery wordpress google-chrome load jquery-isotope

【解决方案1】：

在加载一个充满图像的页面时，我遇到了同样的问题。我只是将 Isotope 设置为在所有图像加载后运行：

$(function() {
    //on all images load

        $('img').on('load', function() {
            //Initialise Isotope
        });
});

【讨论】：

【解决方案2】：

我刚才在使用 ZURB Foundation 4 创建 HTML 模板时遇到了同样的问题，在加载此页面之前，我通过在基础之前调用 isotope 并将同位素调用包装在窗口加载回调中来解决它，如下所示：

// Load Isotope on window load
$(window).load(function(){
    $('.portfolio-items').isotope({
        itemSelector:'.portfolio-item'
    });
});

// Loaded foundation after isotope
$(document).foundation('orbit', {timer_speed:5000,bullets:false,orbit_transition_class: 'orbit-transitioning'});

尝试在加载回调的窗口中包装您的同位素调用，如果这不起作用，请尝试在任何其他 jquery 插件之前加载它，可能会发生冲突。

【讨论】：