在某个断点处，同一页面上的2个砌体容器的内容开始重叠 [英] At a certain breakpoint, the content from 2 masonry containers on the same page starts overlapping
问题描述
我在我的博客索引页面上显示wordpress帖子在砖石布局。我也有在页脚上激活的砖石，在砖石布局中显示wordpress footer小部件。
所以基本上我在同一页面上有 2个砌体容器。
1.用于显示博客文章，和
2.用于显示页脚窗口小部件的其他页面。
页面的HTML标记如下所示：
HTML
< main id =main>
< div class =testmason>
< article class =hentry>帖子1< / article>
< article class =hentry>帖子2< / article>
< article class =hentry>帖子3< / article>
.....
.....
< article class =hentry>帖子n< / article>
< / div>
< / main>
<！ - Footer Widgets - >
< div id =footer-widgetsclass =footer-widgets>
< aside class =widget>小部件1< / aside>
< aside class =widget>小部件2< / aside>
< aside class =widget> Widget 3< / aside>
.....
.....
< aside class =widget>小部件n< / aside>
< / div>
以下是我试图实现此布局的网址。 - http://lanarratrice-al-rawiya.com/lanarratrice/blog/
我不希望在移动设备上加载砌体。
1.我想在仅当文档的最小宽度为837像素时才工作。
2.此外，我希望Footer上的砌体仅在文档的最小宽度为880像素时工作。
任何低于上述宽度的媒体查询都不会触发砌体布局，我将以全宽度（占用完整空间）显示所有帖子和小部件。要实现此我使用inquire js，如果它匹配媒体查询将触发砖石布局。以下是我的javascript：
JAVASCRIPT
// Masonry设置来组织页脚小部件和博客帖子
jQuery（document）.ready（function（$）{
var $ container = $（'＃footer-widgets'），
$ maincontent = $（'。blog .testmason'）;
enquire.register（screen and（min-width：837px），{
// Triggered当媒体查询匹配时
match：function（）{
$ maincontent.masonry（{
columnWidth：200，
itemSelector：'.hentry'，
isFitWidth ：true，
isAnimated：true
}）;
}，
//媒体查询从匹配状态转换为
//时触发一个不匹配的状态
unmatch：function（）{
$ maincontent.masonry（'destroy'）;
}
}）;
enquire.register（screen and（min-width：880px），{
//在媒体查询匹配时触发。
match：function（）{
$ container.masonry（{
columnWidth：400，
itemSelector：'.widget'，
isFitWidth：true，
isAnimated：true
}）;
}，
//当媒体查询将
//从匹配状态转换为不匹配状态时触发。
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屏幕和（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像素（大约大约）时，我看到一个损坏的布局。我看到有时，这个帖子是在页脚的顶部。请参见以下图片。
要重现这个bug，你可能需要缩小和扩展你的浏览器窗口（firefox）约5-8倍。有时如果你缩小它非常快或很慢，你可能不会看到破碎的布局。 BTW我使用的是Firefox 35.0.1。
请让我知道我该如何解决这个问题。感谢。
添加 $ container.masonry（）
问题是，它在调整大小时注册事件，但在加载时，无法计算身高来计算位置。由于这些邮政块是绝对定位的，它从页脚溢出。
I am displaying the wordpress posts on my blog index page in a masonry layout. I also have the masonry activated on footer, to display the wordpress footer widgets in a masonry layout.
So basically I have 2 masonry containers on the same page.
1. One for displaying the blog posts, and
2. Other for displaying the footer widgets.
The html markup for the page looks like this:
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>
Following is the url where I am trying to implement this layout. -- http://lanarratrice-al-rawiya.com/lanarratrice/blog/
I dont want the masonry to load on the mobile devices.
1. I want the masonry on Posts to work only when the min width of the document is 837px.
2. Also I want the masonry on Footer to work only when the min width of the document is 880px.
Any media query lower than the above width(s) will not trigger the masonry layout, and I will display all my posts and widgets in a full width (taking up the full space available). To implement this I am using enquire js, that will trigger the masonry layout if it matches the media query. Following is my 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');
}
});
});
And finally this is my css that is being applied on this page:
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;
}
It seems that my javascript is working correctly, because the masonry layout is implemented. But as I resize my firefox browser window to about 846px (approx around this size), I see a broken layout. I see sometimes that the post is on top of footer. Please see this following picture attached.
To reproduce this bug you might have to shrink and expand your browser window (firefox) around 5-8 times. Sometimes if you shrink it very fast or very slow you might not see the broken layout. BTW I am using Firefox 35.0.1. Please let me know what can I do to fix this issue. Thanks.
Add the $container.masonry() function on page load too.
The issue is, it registers the event on resize, but on load it fails to calculate the body heights to calculate the positions. As these post blocks are absolutely positioned, it bleeds over footer.
这篇关于在某个断点处，同一页面上的2个砌体容器的内容开始重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
