jquery - 同位素不适用于 imagesLoaded？

Question

我使用 jQuery Isotope 创建水平布局，将具有 100% 高度的 DIV 彼此相邻对齐，并将每个 DIV 内的图像垂直居中。因此，我像这样调用同位素，并且在 Chrome 中一切正常(本地):

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

由于图像需要时间加载，它们往往会弄乱同位素布局，因此我尝试使用 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 后，同位素再次启动(但布局困惑)。有谁知道错误出在哪里？

谢谢!

Answer 1

您还可以使用此实现，因此您可以在图像单独加载到网格时显示图像，而不是等待所有内容加载，代码将如下所示:

jQuery(document).ready(function(){

     // Initialize Isotope

     $('.grid').isotope({
        itemSelector: '.item',
        percentPosition: true,
     });

     // Refresh the layout of the grid each time an image gets loaded

     $('.grid').imagesLoadedMB().progress( function() {
        $('.grid').isotope('layout');
    });

});

我个人更喜欢使用现成的插件，例如:https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020使用此插件，您可以非常轻松地指定项目之间的空间、每个分辨率的列数等等，它还具有添加过滤器、排序和搜索字段的功能，请尝试一下!