jquery - 无法让 Isotope 与 Bootstrap 3 一起使用.thumbnail

Question

遵循几位 S.O. 的建议。各位，我决定尝试在网页上使用 Jquery Isotope。我也在使用 Bootstrap 3，并且一直无法让缩略图库(具有不同尺寸的横向/纵向图像)看起来漂亮。

我正在使用 Bootstrap 3 .thumbnail 类来调整图像大小以适合响应列。一切都很顺利，直到我将同位素应用到这些缩略图 div 上。我真的不知道发生了什么事，但我花了几天时间仔细研究了所有事情(不要笑)，但无法弄清楚，我失去了理智，等等。我希望这是非常简单的事情我之所以失踪，是因为我在 bootply.com 上看到过一些似乎可行的示例(不过，不确定我是否在 Bootstrap 3 上看到过任何示例。)

这就是正在发生的事情:

这是我一直在测试的页面的链接:http://www.chrissvensson.info/projects/025

这是我正在使用的代码的主要部分。

<div class="container iso">
<div class="row">
  <div class="item col-xs-12 col-sm-4 col-md-3">
    <a class="thumbnail fancybox" href="<?php echo dirname($image->url()); ?>/detail/<?php echo $image->name() ?>-detail.jpg" rel="group"><img src="<?php echo $image->url() ?>" width="<?php echo $image->width(); ?>" height="<?php echo $image->height(); ?>"></a>
</div><!--thumbnail div-->
    <?php endforeach ?>
<?php endif ?>
</div><!--row-->

这是同位素脚本:

$('.iso').isotope({
// options
itemSelector: '.item',
layoutMode: 'masonry'
});

我一直在这个jsfiddle中测试东西:http://jsfiddle.net/52VtD/345/

它链接到 Bootstrap 3 css，并且也有我自定义的 CSS。由于某种原因，它似乎在 fiddle 中工作正常(除了它剪掉了底部图像这一事实)，但它在我的网站上看起来完全不同。正如您将看到的，它就像不计算 div 的垂直高度，而只是裁剪它们并将它们堆叠在一起。

还有几点:

• 我很确定它与 Bootstrap 3 的 .thumbnail 类中的某些内容有关。当我从链接中删除该类时，一切似乎都正常(除了图像没有缩放到我想要的列)
• 这是疯狂的部分:有几次我点击了另一个选项卡，或者在访问另一个窗口后返回我的网站，一切似乎都正常。我发誓我亲眼目睹了这一切，但我可​​能产生了幻觉。不确定这是否意味着它运行得非常、非常、非常慢或者什么？

如果您能提供任何建议，我将非常非常感激!提前非常感谢您。

Answer 1

您需要添加 imagesLoaded 事件监听器。

$('.container').imagesLoaded(function(){
    $('.container').isotope({...});
});