多个同位素容器，图像装载，只装载一个

Question

标题很好地解释了我的问题，我想，我使用Bootstrap标签，所以我的html看起来像这样:

<div class="tab-content">
    <div id="tab1" class="isotopegrid tab-pane fade in">
        // Images here
    </div>
    <div id="tab2" class="isotopegrid tab-pane fade in">
        // And images here
    </div>
</div>

图片如下:

<div class="col-md-4 isotopegrid-item">
    <img src="#" class="img-responsive" />
</div>

这是我的Js:

(function ($) {
    var $container = $('.isotopegrid');
    $container.each( function( i, elem ){
        var $elem = $( elem );
        $elem.imagesLoaded( function() {
            $elem.isotope({
                itemSelector : '.isotopegrid-item',
                layoutMode: 'masonry'
            });
        });
    });
})(jQuery);

但是由于某些原因，它只加载tab1而不加载tab2，有人能给我一个解决方案吗?哦，没有加载，我的意思是，标签1上的图像加载正常，标签2上的图像重叠

Answer 1

由于您使用的是$container的类，而不是ID，因此您可以这样做:

var $container = $('.isotopegrid');
    $container.imagesLoaded( function() {
        $container.isotope({
            itemSelector : '.isotopegrid-item',
            layoutMode: 'masonry'
        });
    });

如果没有jsfiddle来实际查看问题，就不可能知道其他问题可能是您的问题的根源。