Изображения перекрываются с масонством - PullRequest
Новая
       38

Изображения перекрываются с масонством

0 голосов
/ 07 сентября 2018

В настоящее время я использую jQuery Masonry и плагин imagesLoaded на тему WordPress, но изображения по-прежнему перекрываются при загрузке страницы.

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

Вот скриншот макета при загрузке страницы:

The

Вот мой код сейчас: 

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

...