同位素无法处理图像已加载

Question

我正在使用jQuery Isotope创建一个水平布局，将div以100%的高度并排对齐，并将每个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
            }
        });
    });
});

加载了这些图像后，同位素就不再加载了。移除图像加载后，同位素再次启动(但布局混乱(。有人知道错误在哪里吗？

谢谢！

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有了这个插件，你可以很容易地指定项目之间的空间、每个分辨率上的列数等等，它还可以添加过滤器、排序和搜索字段，试试吧！

Answer 2

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

您只需要将$container.imagesLoaded()封装到$(document).ready()中，并从jquery脚本行中删除asyn属性。