javascript - Isotope 与 Flexbox 配合得不好，还是只有我这样？

Question

我有一个基本的 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/

Answer 1

据我所知，同位素的更高版本可以很好地与 flex 配合使用(我目前在 flexbox 项目中使用它)，但是您需要将布局模式选项添加到您的 js:

// init Isotope
var $grid = $('.grid').isotope({
    // options
    itemSelector: '.element-item',
    layoutMode: 'fitRows'
});

还有其他可用的布局模式选项 - 查看此资源: http://isotope.metafizzy.co/layout-modes.html