Question

我使用jQuery Isotope创建水平布局，将DIV彼此相邻的100％高度对齐，并将每个DIV中的图像垂直对齐。因此，我可以像这样调用Isotope，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，Isotope再次启动（但是混乱的布局）。有谁知道，错误在哪里？

谢谢！

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()函数。

您只需要将$(document).ready()包装到asyn并从jquery脚本行中删除<paper-input id="title" label="Note title"></paper-input> attr。

同位素不使用imagesLoaded？

2 个答案: