javascript - 多个同位素容器，Imageloaded 只加载一个

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，这里有人为我提供解决方案吗？哦，不加载我的意思是tab1上的图像加载正确，并且tab 2上的图像重叠

Answer 1

由于您为 $container 使用了一个类，而不是一个 ID，因此您可以这样做：

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

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