我正在使用Bourbon及其附带的网格框架Neat创建一个网站,并希望将Masonry集成到布局区域以显示新闻文章。
我认为我已经把所有东西设置正确,但看起来砌体的计算有点偏差,因为应该并排放置的物品只是堆叠在另一个之下。
对于我的布局,我使用了Neat的标准@include span-columns()
mixin,以及文章元素本身的flexbox,因此我可以在文章中布置元素。
我已经包含了grid-sizer
'帮助' div允许Masonry根据Masonry文档了解每列应该有多大,所以我的HTML标记如下:
<div class="o-row">
<div class="o-contain">
<div class="news__listing js-articles">
<div class="u-grid-sizer js-grid-sizer"></div>
<article <?php post_class('c-article c-article--listed js-articles__item'); ?>>
<header class="c-article__header">
<?php if (has_post_thumbnail()) {
$image = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'large'); ?>
<img class="c-article__image" src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" />
<?php } ?>
<h2 class="c-article__title"><?php the_title(); ?></h2>
</header>
<div class="c-article__summary s-cms-content">
<?php the_excerpt(); ?>
</div>
<footer class="c-article__footer">
<a class="c-button c-button--gamma" href="<?php the_permalink(); ?>">Read blog post</a>
</footer>
</article>
</div>
<div class="news__sidebar c-sidebar">
<?php get_sidebar(); ?>
</div>
</div>
</div>
我在父容器和文章本身上使用的CSS如下:
.news__listing {
@include media($m-up) {
@include span-columns(8);
@include omega(2n);
}
}
.c-article {
.news__listing & {
margin-bottom: $space;
@include media($m-up) {
@include span-columns(6);
@include omega(2n);
@include display(flex);
@include flex-direction(column);
@include flex-shrink(0);
}
}
}
.u-grid-sizer {
.news__listing & {
@include media($m-up) {
@include span-columns(6);
@include omega(2n);
}
}
}
用来调用和实现Masonry的JS就是:
jQuery(document).ready(function($) {
$('.js-articles').masonry({
columnWidth: '.js-grid-sizer',
itemSelector: '.js-articles__item'
});
});
我做了什么明显错误的事吗?如果我从我的标记中删除js-articles
类,那么文章元素就会正确地展开,只要它们在页面上显示为两个,尽管每个行下面都有很大的边距。文章,这是我试图使用Masonry删除。
答案 0 :(得分:1)
我设法让Masonry与Neat合作,使用您描述的相同布局。 Neat的主要问题在于,由于砌体移动物体,Neat对天沟(欧米茄等)的处理并不能与砌体真正合作,并且排水沟采用砌体的方式。 (通常Neat使用&#39; span-columns&#39;值来关闭位于最后一列的项目的正确装订线;使用不再有效的砌体,因为无法保证项目将出现在哪一列在)。以下是可能有助于使用Masonry进行整洁布局的步骤:
span-columns(6, table);
)这会移除排水沟并确保一切都是砌体的预期宽度。如果你这样做,你不应该设置omega
。padding-right: $gutter
(尽管你可能需要调整容器元素的宽度,或者稍微调整它的位置 - 例如通过赋予它margin-left: $gutter / 2;
- 以补偿最后一列上的额外排水沟删除)。grid-sizer
元素。如果所有项目的宽度相同,您应该只使用itemSelector
选项初始化Masonry。