根据几个 SO 成员的建议,我决定尝试在网页上使用 Jquery Isotope。我也在使用 Bootstrap 3,并且一直无法让缩略图库(具有不同大小的横向/纵向图像)看起来不错。
我正在使用 Bootstrap 3 .thumbnail 类来调整图像大小以适应响应列。在我将 Isotope 应用于这些缩略图 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。出于某种原因,它在小提琴中似乎工作正常(除了它正在切断底部图像的事实),但它在我的网站上看起来完全不同。正如您将看到的,它就像不计算 div 的垂直高度,只是裁剪它们并将它们堆叠在一起。
还有几点:
- 我很确定这与 Bootstrap 3 的 .thumbnail 类中的某些内容有关。当我从链接中删除该类时,一切似乎都正常(除了图像没有缩放到我想要的列)
- 这是疯狂的部分:有几次我点击了另一个标签,或者在访问了另一个窗口后回到了我的网站,一切似乎都在工作。我发誓我亲眼目睹了这一切,但我可能产生了幻觉。不确定这是否意味着它工作得非常、非常、非常缓慢或其他什么?
如果您能提供任何建议,我将非常非常感激!非常感谢你。