Question

这里有一个JSFiddle链接显示我的问题：
http://jsfiddle.net/robkom/T73QK/23/

$(document).ready(function() {


    // https://github.com/IonDen/ion.tabs

    $.ionTabs("#tabs_group");


    // http://masonry.desandro.com/, http://imagesloaded.desandro.com/

    var $container1 = $(".ionTabs__body").find("[data-name=tab1]");
    $container1.imagesLoaded(function(){
        $container1.masonry({
            itemSelector: '.item',
            transitionDuration: 0
        })
    });

    var $container2 = $(".ionTabs__body").find("[data-name=tab2]");
    $container2.imagesLoaded(function(){
        $container2.masonry({
            itemSelector: '.item',
            transitionDuration: 0
        })
    });

    var $container3 = $(".ionTabs__body").find("[data-name=tab3]");
    $container3.imagesLoaded(function(){
        $container3.masonry({
            itemSelector: '.item',
            transitionDuration: 0
        })
    });


});

我使用的是jQuery 1.11.0，jQuery插件是Masonry和Ion.Tabs。基本上，每个标签都是一个有方形div的容器，我希望以砖石方式排列。

有三个选项卡，即使我分别在每个选项卡上初始化Masonry，它似乎只对第一个选项卡产生影响。谁能解释我做错了什么？其他两个标签应该看起来像第一个。

Answer 1

搞定了： http://jsfiddle.net/robkom/T73QK/35/

我必须添加以下代码：

$('.ionTabs__tab').click(function(){
    var $container = $(".ionTabs__item");
    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.box',
            transitionDuration: 0
        });
    });
});

使用ion.tabs的jQuery砌体，在同一页面上使用带有不同（制表符）容器的砌体

1 个答案: