Блоки макета каменной кладки перекрываются, работает при обновлении

В WordPress у меня есть сообщения, организованные по каменной кладке, которые отлично работают в 60% случаев.

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

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

Masonry загружается WordPress, и в моем файле script.js следующее:

    var $container = $('#latestposts');
            $container.masonry({
        itemSelector: '.masonryitem',
        isAnimated: true
    });

Спасибо!


wordpress masonry jquery-masonry
person designlobby    schedule 14.09.2014    source источник
comment
Masonry просто ведет себя странно: \ Попробуйте расположить их случайным образом с помощью sortBy: 'random' и указать макет с помощью layoutMode: 'masonry', хотя это должно быть по умолчанию, и посмотрите, изменится ли что-нибудь...   -  person dingo_d    schedule 14.09.2014

Ответы (2)


arrow_upward
2
arrow_downward

Это распространенная проблема, с которой люди сталкиваются при работе с Masonry/Isotope, и она рассматривается здесь, в FAQ: http://masonry.desandro.com/faq.html.

Чтобы исправить это, вызовите метод layout в конце вашего блока кода, и это обновит макет, как только элементы уже загрузятся, в результате чего перекрытия не будет.

Вот соглашение из документации Masonry: http://masonry.desandro.com/methods.html#layout

В качестве альтернативы вы также можете исправить это, убедившись, что все элементы уже загружены перед запуском плагина Masonry.

Если это приводит только к перекрытию изображений, другой способ исправить это — использовать метод imagesLoaded() после того, как изображения уже загружены. Это вызовет Masonry и заставит плагин обновить макет. Просто имейте в виду, что если вы собираетесь использовать этот подход, вам действительно нужно добавить скрипт imagesLoaded (https://github.com/desandro/imagesloaded) в свой проект перед вызовом метода. См. эту страницу в документации для получения дополнительной информации об этом: http://masonry.desandro.com/appendix.html#imagesloaded

Кроме того, вам могут пригодиться некоторые советы из этого поста: кажется-не-работающим?rq=1">Я хочу использовать Masonry в WordPress, но это не работает

person shmuli    schedule 14.09.2014
comment
Пожалуйста, проголосуйте за этот пост, если он был полезен, и отметьте его как правильный ответ, если он решил вашу проблему. Спасибо! :) - person shmuli; 14.09.2014
comment
Спасибо за вашу помощь, это здорово. Я использовал imagesLoaded, чтобы исправить проблему на данный момент, мне кажется, что это нормально, но мне нужно протестировать во всех браузерах и т. д. Я использовал код с jQuery: var $container = $('#latestposts'); $container.imagesLoaded( function() { $container.masonry({ itemSelector: '.masonryitem', isAnimated: true }); }); - person designlobby; 15.09.2014

arrow_upward
1
arrow_downward

Есть твик, чтобы исправить это в браузере Chrome и Safari.

Добавьте эту строку:

jQuery("img").load(function() { jQuery(".container_class").masonry(); });
person Dharmik    schedule 16.09.2014