Can't get Isotope working with Bootstrap 3 .thumbnail

问题

Following the advice of several S.O. members, I have decided to try to use Jquery Isotope on a webpage. I am also using Bootstrap 3, and have been having trouble getting a thumbnail gallery (with different-sized landscape/portrait orientation images) looking nice.

I am using the Bootstrap 3 .thumbnail class to resize the images to fit within the responsive columns. Everything works great until I apply Isotope to these thumbnail divs. I really don't know what is going on, but I have spent several days going over everything (don't laugh) and can't figure it out, am losing my mind, etc. I'm hoping it's something pretty simple that I'm missing because I have seen examples on bootply.com that seem to work (not sure if I've seen any with Bootstrap 3, though.)

This is what's happening:

Here is a link to the page I have been testing: http://www.chrissvensson.info/projects/025

This is the main part of the code I'm using.

<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-->

Here's the Isotope script:

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

I have been testing things in this jsfiddle: http://jsfiddle.net/52VtD/345/

That is linked to the Bootstrap 3 css and has my customized CSS in there as well. For some reason, it seems to be working okay in the fiddle (except for the fact that it's cutting the bottom images off), but it looks totally different on my site. As you will see, it's like it doesn't calculate the vertical height of the divs, and just crops them and piles them on top of each other.

A few more points:

I'm pretty sure it has to do with something in Bootstrap 3's .thumbnail class. When I remove that class from the link, things seem to work okay (except the images don't scale to the columns, which I want)
Here is the crazy part: a few times I have clicked onto another tab, or come back to my website after visiting another window AND EVERYTHING SEEMS TO BE WORKING. I swear I've witnessed this, but I could be hallucinating. Not sure if this means that it's working very, very, very slowly or something, though?

If you can offer any advice I would be very, very grateful! Thank you so much in advance.

回答1:

You need to add the imagesLoaded event listener.

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

回答2:

Note:
1.you should call iso-top function inside windwo load event (it will wait for resources to be loaded) also you can call function in footer.

2.confirm that function call after css load.

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

回答3:

the imagesLoaded plugin should totally work (even though it has been removed from Isotope v2), I personally have solved it like this:

var myGrid = $('.grid');

myGrid.imagesLoaded(function(){
    myGrid.isotope();
});

But I also loved how this plugin solved the issue internally: http://goo.gl/sQ6yXj and it is using Isotope v2 which is very awesome

来源：https://stackoverflow.com/questions/19558476/cant-get-isotope-working-with-bootstrap-3-thumbnail

标签

jquery

css

twitter-bootstrap

jquery-isotope