tabs - 标签/手风琴内的jQuery同位素

Question

我正在尝试在选项卡/手风琴内运行 4 列砌体同位素项目。我发现当标签元素可见时，我需要使用layout, 来使同位素工作。

所以我尝试了这个；

jQuery(function ($) {
    $('.tab_title').click(function(){
        $('.iso-container').isotope({
            itemSelector : '.iso-item',
            layoutMode:'masonry',
            masonry:{
                columnWidth: 300
            }       
        });

    });
});

当我单击选项卡 (.tab_title) 时，同位素出现，但在一列中，占据整个容器宽度。我该如何解决这个问题？

值得一提的是，我也试过$('.iso-container').isotope('layout')了。这也显示了一个项目占据了容器的整个宽度。

标签： tabsaccordionjquery-isotope

Answer 1

我能够使用以下方法解决它：

$('.iso-container').isotope( 'reloadItems' ).isotope( { sortBy: 'original-order' } );

如果万一图像相互重叠，请使用imagesLoaded。

var $grid = $('.iso-container').imagesLoaded( function() {
    $grid.isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
});