I am using bootstrap and isotope to create a filterable responsive grid, however, my images are getting overlapped on resize. I am using DeSandro's imagesLoaded so that images don't overlap on load.

Resizing the example below will make the .col-md-4 divs to overlap. Any idea why this is happening?

Example here.

.col-md-4 Items overlapping:

I have the following HTML:

<div class="container">

  <div id="isotope" class="row">

    <div class="item col-md-8">

      <img class="img-responsive" src="">

    </div>

    <div class="item col-md-8">

      <img class="img-responsive" src="">

    </div>

    <div class="item col-md-8">

      <img class="img-responsive" src="">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="">

    </div>

  </div>

</div>

And this is my JS:

var isotope = $("#isotope").isotope({
  // options
  itemSelector: '.item',
  masonry: {
    columnWidth: '.col-md-4'
  }
});

isotope.imagesLoaded(function() {
  isotope.isotope('layout');
});

I am using bootstrap and isotope to create a filterable responsive grid, however, my images are getting overlapped on resize. I am using DeSandro's imagesLoaded so that images don't overlap on load.

Resizing the example below will make the .col-md-4 divs to overlap. Any idea why this is happening?

Example here.

.col-md-4 Items overlapping:

I have the following HTML:

<div class="container">

  <div id="isotope" class="row">

    <div class="item col-md-8">

      <img class="img-responsive" src="http://lorempixel./820/315">

    </div>

    <div class="item col-md-8">

      <img class="img-responsive" src="http://lorempixel./820/315">

    </div>

    <div class="item col-md-8">

      <img class="img-responsive" src="http://lorempixel./820/630">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="http://lorempixel./410/315">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="http://lorempixel./410/316">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="http://lorempixel./410/317">

    </div>

  </div>

</div>

And this is my JS:

var isotope = $("#isotope").isotope({
  // options
  itemSelector: '.item',
  masonry: {
    columnWidth: '.col-md-4'
  }
});

isotope.imagesLoaded(function() {
  isotope.isotope('layout');
});

• javascript
• twitter-bootstrap
• jquery-isotope
• masonry

• your link is broken. – Macsupport Commented Mar 17, 2016 at 13:43
• @Macsupport there was a problem with lorempixel, I changed it to placeholdit. Thanks for your help. – enriqg9 Commented Mar 17, 2016 at 14:22

4 Answers 4

Use col-xs-12 in addition to col-md-4 and col-md-8 in your div classes. This tells isotope the size the images should be and stops them overlapping.

<div class="col-xs-12 item col-md-8">

  // content here

</div>

You can use:

$(window).resize(function(){
   $("#isotope").masonry().masonry("reloadItems");
});

$("#isotope").masonry().masonry("reloadItems"); normally use when appending items to the grid. When you resize images and if you are using Masonry to re-arrange the grid, you should trigger 'layout' after doing resizing stuff. Probably you should re-create entire Masonry object after resizing. In that case there should be enough time to recalculate DOM before Mosonry object to start triggering 'layout'. For example if you do some server-side image rotation using ajax call, on success callback you should use setTimeout for about 100ms to identify the new DOM layout. I spent two days to figure it out. Hopefully someone will save the time using this little trick. NB: I'm working on a Raspberry pi project. Jquery + Bootstrap + Masonry on Python flask server.

// do your resizing stuff ...
setTimeout(function(){
    $('.img-panel').masonry({
        itemSelector: '.grid-item', // the grid item selector
        percentPosition: true // according to your needs
    }).masonry("layout");
}, 100);

My issue ended up being by not having a set width on .col-md-4 below the medium grid size since the .col elements get a position: absolute applied by isotope. By adding the CSS below, I didn't even need to trigger layout or reloadItems on resize.

// Col SM
@media (max-width: $screen-md-min) {
  .item {
    width: 100%;
  }
}