Reputation: 1507
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.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
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
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
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
Reputation: 4418
You can use:
$(window).resize(function(){
$("#isotope").masonry().masonry("reloadItems");
});
Upvotes: 3