同位素不适用于imagesLoaded吗? [英] Isotope not working with imagesLoaded?

问题描述

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

I'm using jQuery Isotope to create a horizontal layout, aligning DIVs with 100% height next to each other and center images inside each DIV vertically. So for, I'm calling Isotope like this and everything works fine in Chrome (locally):

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

由于图像需要花费一些时间来加载，因此它们倾向于使同位素布局混乱，因此我尝试使用imagesLoaded修复程序: http://isotope.metafizzy.co/appendix.html

As the images take time to load, they tend to mess up the Isotope layout, so I'm trying to work with the imagesLoaded fix: http://isotope.metafizzy.co/appendix.html

我是这样实现此修复程序的:

I implemented this fix like this:

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

加载此图像后，同位素将不再加载.删除图像加载后，同位素再次开始播放(但布局混乱).有谁知道错误在哪里?

With this imagesLoaded, the Isotope does not load at all anymore. Removing imagesLoaded, Isotope kicks in again (but with the messed up layouts). Does anyone know, where the mistake lies?

谢谢！

推荐答案

您还可以使用此实现，因此无需等待所有内容加载，而是可以将图像分别加载到网格中时显示它们看起来像这样:

You can also use this implementation, so instead of waiting for everything to load, you can show the images as they get loaded to the grid individually, the code would look something like this:

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');
    });

});

我个人比较喜欢使用一个易于使用的插件，例如:

I personally I would prefer to use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 with this plugin you can specify very easy the space between the items, number of columns on each resolution, and more, also it comes with the ability to add filters, sorting and a search filed, give it a try!

这篇关于同位素不适用于imagesLoaded吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！