css - 在某个断点处，同一页面上 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>

以下是我尝试实现此布局的网址。 -- http://lanarratrice-al-rawiya.com/lanarratrice/blog/

我不想在移动设备上加载砌体。
1. 我希望 Posts 的砌体仅在文档的最小宽度为 837px 时起作用。
2. 我还希望页脚上的砌体仅在文档的最小宽度为 880px 时才起作用。

任何低于上述宽度的媒体查询都不会触发砌体布局，我将以全宽显示我的所有帖子和小部件(占用全部可用空间)。为实现此我正在使用 inquire 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 次。有时，如果您非常快或非常慢地收缩它，您可能看不到损坏的布局。顺便说一句，我使用的是 Firefox 35.0.1。请让我知道我能做些什么来解决这个问题。谢谢。

Answer 1

在页面加载时也添加 $container.masonry() 函数。

问题是，它在调整大小时注册事件，但在加载时无法计算高度来计算位置。由于这些帖子 block 是绝对定位的，因此它会溢出页脚。