Изотоп не работает с изображениями загружен?

Question

Я использую изотоп jQuery для создания горизонтального макета, выравнивая 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 больше не загружается. Удаляя загруженные изображения, 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() Функция вызывается перед загрузкой подключаемого модуля изображений.

Вам просто нужно завернуть $container.imagesLoaded() в $(document).ready() и удалить asyn attr из строки сценария jquery.