与砌体重叠的图像

Question

我目前在WordPress主题上使用jQuery Masonry和imagesLoaded插件，但是在加载页面时图像仍然重叠。

仅当我调整页面大小时，布局才能很好地显示，但否则看起来还是很糟糕。

这是页面加载时的布局屏幕截图：

这是我的代码：

jQuery(function ($) {
   $('.gridContainer').imagesLoaded( function() {
    var doneMasonry = false;

    function doPostsMasonry() {

        if (doneMasonry) {
            return;
        }
        doneMasonry = true;
        var masonry = $(".post-list.row");

        var images = masonry.find('img');
        var loadedImages = 0;

        var debounceMasonryRefresh = jQuery.debounce(function () {
            masonry.data().masonry.layout();
        }, 500);

        function imageLoaded() {
            loadedImages++;
            if (images.length === loadedImages && masonry.data().masonry) {
                masonry.data().masonry.layout();
            }
        }

        images.each(function () {
            $(this).on('load', imageLoaded);
            debounceMasonryRefresh();
        });


        var items = $(".post-list.row .post-list-item");
        var index = items.length - 1;
        items.each(function () {
            $(this).css({
                width: $(this).css('max-width')
            })
        });
        if (masonry.length) {
            masonry.masonry({
                itemSelector: '.post-list-item',
                percentPosition: true,
                columnWidth: '.' + items.eq(index).attr('data-masonry-width')
            });
        }
    }

    if (window.innerWidth >= 768) {
        doPostsMasonry();
    }

    $(window).resize(function () {
        if (window.innerWidth >= 768) {
            doPostsMasonry();
        }
    })
   })
});

我也尝试使用功能layoutComplete（例如$('.div').on('layoutComplete', function {})），但是它也不起作用。

您可以在此处实时浏览页面：https://www.lesvoyagesdemma.fr/bonsplans