Масонство, перекрывающее Tumblr Photosets

Question

Я пытался создать макет Tumblr с 3 столбцами, используя Masonry и ImagesLoaded. Однако у меня проблемы с перекрытием фотосетов. Я также использую PXU Photoset.

Проблема:

В первые секунды блог выглядит испорченным: http://s11.postimg.org/ry4fa614j/Overlapping.jpg

Затем он фиксируется в отсортированных столбцах: http://s16.postimg.org/i13qld4hh/no_Overlapping.jpg

Также перекрытие происходит только с постами фотосетов. Любой другой тип поста (в том числе только с одним изображением) работает нормально.

Мой код:

Пока что этот код работает лучше всего для меня, но создает проблему, о которой я говорил ранее:

var $container = $('#threeCol');

$container.masonry({
      itemSelector: ".post",
      transitionDuration: 0
    });

$(document).ready(function(){
   $('.photo-slideshow').pxuPhotoset({
       lightbox: true,
       rounded: false,
       gutter: '0px',
       borderRadius: '0px',
       photoset: '.photo-slideshow',
       photoWrap: '.photo-data',
       photo: '.pxu-photo'}, function () {
          $container.imagesLoaded(function(){
            $('#threeCol').masonry({
                percentPosition: true,
                columnWidth: '.post',
                itemSelector: '.post',
                gutter:20,
                resize: true
            },
            function() { 
                $('#threeCol').masonry({ 
                    appendedContent: $(this) 
                }); 
            });
        }).resize();

        $('.post img').imagesLoaded(function() {
            $('#threeCol').masonry({
                percentPosition: true,
                columnWidth: '.post',
                itemSelector: '.post',
                gutter:20,
                resize: true
            }).resize();
        });

    });
});

Здесь, ThreeCol - это мой контейнер, а пост - это каждый отдельный пост, который я хочу разместить в сетке.

Кроме того, я не использую InfiniteScroll.

Цель:

Я хотел бы, чтобы содержимое загружалось быстро и не выглядело сломанным в первые секунды загрузки.

Я уже попробовал:

Так как я занимался этой проблемой в течение нескольких дней, я уже пытался несколько вещей.

$(window).load(...);

Это не работает вообще с моим текущим кодом. И когда это работает, это очень медленно, и пользовательский опыт плох.

Что касается других постов с решениями, я перепробовал многие из них, в том числе:

• Masonry JS Перекрывающиеся элементы

• Tumblr Masonry с проблемой фотосет PXU

• Использование кладки с загруженными изображениями

• Вопрос перекрытия масонства

• Перекрытие масонства (ошибка Imbalance2)

И другие на GitHub и ссылки, которые я не могу найти снова.

Спасибо за чтение моего вопроса, и любая помощь будет очень кстати!

РЕДАКТИРОВАТЬ:

Мой вопрос отличается от нескольких предыдущих, потому что мои проблемы - это фотосеты (которые представляют собой группы из двух или более изображений, которые находятся на одном и том же посте, поэтому являются частью одного и того же элемента сетки), а не отдельные изображения. Я также не знаю, сколько изображений входит в каждый фотосет, и я не знаю их размеров.

Фотосеты - это тип поста в Tumblr.