我有一个基本的 flexbox 布局。
CSS:
.grid {
display: flex;
flex-wrap: wrap;
}
.element-item {
flex-direction: row;
width: calc(100% / 2);
}
.element-item img {
width: 100%;
height: 16em;
object-fit: cover;
}
HTML:
<div class="grid">
<div class="element-item taxonomy">
<img class="attachment-post-thumbnail" src="image-1.jpg" alt="image-1" />
<h3>Title</h3>
<h5>Taxonomy</h5>
</div>
...
</div>
很好,按钮过滤器导航也可以正常工作。但是当我在我的 .js 文件中初始化 Isotope 时,整个布局崩溃了,图像消失了,所有东西都堆叠在一起。
jQuery::
// init Isotope
var $grid = $('.grid').isotope({
// options
itemSelector: '.element-item',
});
// filter items on button click
$('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
Isotope 不能很好地与 Flexbox 一起“工作”吗?或者我是否缺少一些 Isotope jQuery 选项。还是我对 Flexbox 属性不够精确?
谢谢。
jsfiddle 按要求 https://jsfiddle.net/Lyqdguvz/
最佳答案
据我所知,同位素的更高版本可以很好地与 flex 配合使用(我目前在 flexbox 项目中使用它),但是您需要将布局模式选项添加到您的 js:
// init Isotope
var $grid = $('.grid').isotope({
// options
itemSelector: '.element-item',
layoutMode: 'fitRows'
});
还有其他可用的布局模式选项 - 查看此资源: http://isotope.metafizzy.co/layout-modes.html
关于javascript - Isotope 与 Flexbox 配合得不好,还是只有我这样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39581446/