jQuery 内部的同位素 tab/accorion

Question

我正在尝试运行 tab/accordion 中的 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')。这也显示了一项占据了容器的整个宽度。

Answer 1

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

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

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

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

jQuery 内部的同位素 tab/accorion

jQuery isotope inside tab/accorion

tabs

accordion

jquery-isotope