При определенной точке останова содержимое из 2 контейнеров для кладки на одной странице начинается с перекрытия

Question

Я показываю сообщения Wordpress на странице моего блога в макетной макете. У меня также есть каменная кладка, активированная на нижнем колонтитуле, для отображения виджетов нижнего колонтитула Wordpress в макете.

Итак, в основном у меня есть 2 контейнера для кладки на одной странице.
1. Один для отображения сообщений в блоге, и
2. Другое для отображения виджетов нижнего колонтитула.

HTML-разметки страницы выглядит следующим образом:

HTML

<!-- Posts --> 
<main id="main"> 
    <div class="testmason"> 
     <article class="hentry">Post 1</article> 
     <article class="hentry">Post 2</article> 
     <article class="hentry">Post 3</article> 
     ..... 
     ..... 
     <article class="hentry">Post n</article> 
    </div> 
</main> 

<!-- Footer Widgets --> 
<div id="footer-widgets" class="footer-widgets"> 
    <aside class="widget">Widget 1</aside> 
    <aside class="widget">Widget 2</aside> 
    <aside class="widget">Widget 3</aside> 
    ..... 
    ..... 
    <aside class="widget">Widget n</aside> 
</div> 

Ниже приводится URL, где я пытаюсь реализовать этот макет. - http://lanarratrice-al-rawiya.com/lanarratrice/blog/

Я не хочу, чтобы кладка загружалась на мобильные устройства.
1. Я хочу, чтобы каменная кладка на должностях работала только тогда, когда минимальная ширина документа составляет 837 пикселей.
2. Также я хочу, чтобы каменная кладка на нижнем колонтитуле работала только тогда, когда минимальная ширина документа составляет 880 пикселей.

Любой медиа-запрос, расположенный ниже указанной ширины (ов), не будет запускать макетную раскладку, и я буду отображать все мои сообщения и виджеты в полной ширине (занимая полное пространство). Чтобы реализовать это , я использую запрос js, который будет вызывать макетный макет, если он соответствует медиа-запросу. Ниже мой JavaScript:

JAVASCRIPT

// Masonry settings to organize footer widgets and blog posts 
jQuery(document).ready(function($){ 
    var $container = $('#footer-widgets'), 
     $maincontent = $('.blog .testmason'); 

    enquire.register("screen and (min-width:837px)", { 

     // Triggered when a media query matches. 
     match : function() { 
      $maincontent.masonry({ 
       columnWidth: 200, 
       itemSelector: '.hentry', 
       isFitWidth: true, 
       isAnimated: true 
      }); 
     }, 

     // Triggered when the media query transitions 
     // from a matched state to an unmatched state. 
     unmatch : function() { 
      $maincontent.masonry('destroy'); 
     } 

    }); 

    enquire.register("screen and (min-width:880px)", { 

    // Triggered when a media query matches. 
    match : function() { 
     $container.masonry({ 
      columnWidth: 400, 
      itemSelector: '.widget', 
      isFitWidth: true, 
      isAnimated: true 
     }); 
    }, 

    // Triggered when the media query transitions 
    // from a matched state to an unmatched state. 
    unmatch : function() { 
     $container.masonry('destroy'); 
    } 

    }); 
}); 

И, наконец, это мой CSS, который применяется на этой странице:

CSS

#main { 
    max-width: 100%; 
    width: 100%; 
} 

.testmason { 
    margin: 0 auto 35px; 
} 

#main article { 
    margin: 0 20px 35px; 
    width: 360px; 
    float: left; 
} 

@media screen and (max-width: 854px) { 
    #main { width: 100%; } 

    #main .testmason { 
     margin: 0 10px; 
     width: auto!important; 
     height: auto!important; 
    } 

    #main article { 
     float: none; 
     width: 100%; 
     margin: 0 0 35px; 
    } 

    #main .index-box { 
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); 
     margin: 0 auto 2em; 
     width: auto; 
     max-width: 780px; 
     max-width: 78rem; 
    } 

    #main .navigation { 
     width: auto; 
     max-width: 780px; 
     max-width: 78rem; 
    } 
} 

.index-box { 
    margin: 0; 
} 

nav.paging-navigation { 
    width: 90%; 
    position: static!important; 
    margin: 0 auto; 
} 

Кажется, что мой javascript работает правильно, потому что макет кладки реализован. Но когда я изменяю размер окна браузера Firefox примерно до 846 пикселей (примерно в этом размере), я вижу разбитый макет. Иногда я вижу, что сообщение находится поверх верхнего колонтитула. Пожалуйста, ознакомьтесь с приведенным ниже рисунком.

Чтобы воспроизвести эту ошибку, вы, возможно, придется сжать и расширить окно браузера (Firefox) около 5-8 раз. Иногда, если вы сжимаете его очень быстро или очень медленно, вы можете не увидеть сломанную компоновку. BTW Я использую Firefox 35.0.1. Пожалуйста, дайте мне знать, что я могу сделать, чтобы исправить эту проблему. Благодарю.

Answer 1

Добавить функцию $container.masonry() на загрузку страницы.

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