Question

I try to integrate Isotope to a Bootstrap project and it doesn’t really go well.

Here is some pieces of code to explain :

<section id="last" class="row">
  <article class="post span3">
    ...
  </article>
  <article class="post span3">
    ...
  </article>
  <article class="post span3">
    ...
  </article>
</section>

$(function(){
  $('#last').isotope({
    itemSelector : '.post',
    layoutMode : 'fitRows'
  });
});

And here is the weird result

Would you have any idea why it gives me this ? :/

Answer 1

You should check the imagesLoaded() function in Isotope. Maybe the images are not completely loaded before the Isotope init.

    $(function(){
        $('#last').imagesLoaded(function(){
            $('#last').isotope({
                itemSelector : '.post',
                layoutMode : 'fitRows'
            });
        });
    });

http://isotope.metafizzy.co/docs/help.html