CODEWITHSUNDEEP
javascripttwitter-bootstrapjquery-isotopemasonry
enriqg9
enriqg9

Reputation: 1507

Isotope/Masonry images overlapping on resize

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:

.col-md-4 Items appear overlapping on resize

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.com/820/315">

    </div>

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

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

    </div>

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

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

    </div>

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

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

    </div>

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

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

    </div>

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

      <img class="img-responsive" src="http://lorempixel.com/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');
});

Upvotes: 3

Views: 3485

Answers (4)

Tharanga
Tharanga

Reputation: 2767

$("#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);

Upvotes: 1

paddyfields
paddyfields

Reputation: 1539

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>

Upvotes: 3

enriqg9
enriqg9

Reputation: 1507

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%;
  }
}

Upvotes: 0

JP. Aulet
JP. Aulet

Reputation: 4418

You can use:

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

Upvotes: 3

Related Questions