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

Question

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

Answer 1

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

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

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

Answer 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 插件之前加载它，可能会发生冲突。