同位素不适用于 imagesLoaded？答案

【问题标题】：Isotope not working with imagesLoaded?同位素不适用于 imagesLoaded？
【发布时间】：2014-04-30 11:33:57
【问题描述】：

我正在使用 jQuery Isotope 创建一个水平布局，将 100% 高度的 DIV 对齐，并将每个 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，同位素不再加载。删除加载的图像，同位素再次启动（但布局混乱）。有谁知道错在哪里？

谢谢！

【问题讨论】：

您已包含imagesLoaded 脚本：desandro.github.io/imagesloaded
哇，笨蛋，非常感谢，就是这样。
德普。感谢您调试我疲惫的大脑。

标签： jquery jquery-isotope imagesloaded

【解决方案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 使用此插件，您可以非常轻松地指定项目之间的空间、每个分辨率上的列数等等，它还提供具有添加过滤器、排序和搜索字段的功能，试试吧！

【讨论】：

【解决方案2】：

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

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

【讨论】：