同位素不使用imagesLoaded？

Question

我正在使用jQuery Isotope创建一个水平布局,将DIV彼此相邻的100%高度对齐,并将每个DIV中的图像垂直对齐.因此,我称之为Isotope就像这样,Chrome(本地)的一切正常:

$(function(){
    var $container = $('#container');
    $container.isotope({
        itemSelector : '.itemwrap',
        layoutMode: 'horizontal',
        horizontal: {
            verticalAlignment: 0.5
        }
    });
});

由于图像需要时间加载,它们往往会弄乱Isotope布局,所以我正在尝试使用imagesLoaded修复:http://isotope.metafizzy.co/appendix.html

我实现了这样的修复:

$(function(){
    var $container = $('#container');
    $container.imagesLoaded( function(){
        $container.isotope({
            itemSelector : '.itemwrap',
            layoutMode: 'horizontal',
            horizontal: {
                verticalAlignment: 0.5
            }
        });
    });
});

使用此图像加载,同位素不再加载.删除imagesLoaded,Isotope再次启动(但是混乱的布局).有谁知道,错误在哪里？

谢谢!

Answer 1

我最近也遇到了同样的问题，发现这是由于异步调用造成的。$container.imagesLoaded()在加载图像加载插件之前调用您的函数。

您只需要包装$container.imagesLoaded()并从 jquery 脚本行中$(document).ready()删除attr 即可。asyn