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上的图像正确加载，并且选项卡2上的图像重叠

Answer 1

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

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

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

多个同位素容器，Imageload只加载一个

1 个答案: