Packery + AJAX загруженный контент + ретрансляция пакетов

Question

Я создаю макет с помощью библиотеки Packery из Metafizzy, где я перечисляю заголовки и миниатюры записей. После того, как они нажаты, я скрываю исходное содержимое, а затем ajax загружаю оставшуюся часть сообщения, чтобы заменить это исходное содержимое.

Я ищу советы о том, как бы я тогда ретранслировал упаковку, так как не могу заставить ее работать должным образом. Возможно, моя функция ajax должна отличаться, чтобы она работала. Загрузка ajax работает, но в пакете существует проблема с перекрытием.

 $(".modlink").click(function(){
        $(this).find('div.block:first').toggleClass("hidden");
        var post_link = $(this).attr("rel");
        $(this).find('article').toggleClass("d").fadeIn();
        $(this).find('div.hiddengems').toggleClass("showing");
        $(this).find('div.hiddengems').load(post_link); 
        $container.packery('layout');
    return false;
});

В любом случае. Я за любые советы и рекомендации по ajax + packery.

Примеры сайтов, использующих этот эффект. http://www.prohelvetia.ch/mobile http://www.typetoken.net/ (хотя это только добавление, но не удаление исходного контента)

Answer 1

Похоже, что Packery пытается построить сетку до загрузки всех изображений. Попробуйте использовать ImagesLoaded.js. Это сделано MetaFizzy и предназначено для использования с упаковкой.

http://imagesloaded.desandro.com/

Кроме того, я бы попробовал что-то вроде этого, чтобы загрузить и добавить новый элемент:

function appendPackeryElement() {
    $.ajax({
      method: "GET",
      url: "/theurl/"
    })
    .done(function( data ) {
        var $container = $('.your-packery-container');
        $container.packery( 'fit', data ).fadeIn();
    });
}

Answer 2

macksol совершенно прав: проблема в том, что изображения не загружаются вовремя, и чтобы это исправить, мы можем использовать собственные изображения Metafizzy, загруженные js: https://imagesloaded.desandro.com/

Я не мог, однако, использовать сценарий так, как его представил macksol.

Вот мой рабочий вызов JavaScript:

<script type='text/javascript'>
    $('.grid').imagesLoaded( function(){
        $('.grid').packery({
            itemSelector:'.grid-item', // these options should be modified for your layout
            percentPosition:true, // these options should be modified for your layout
            gutter:5 // these options should be modified for your layout
        });
    });
</script>

Удачи и всего наилучшего!