Isotope + Twitter Bootstrap + Infinite Scroll + Fluid/Responsive layout

29th April 2014 – I updated the code below and I think that now it really is as good as this can possibly get.
Perfect result!

I love both Isotope and Twitter Bootstrap framework, I think they’re great tools for developers & web designers alike.
However, due to the nature of TB’s fluid structure (with widths in % rather than px) and Isotope being originally developed way before this kind of layout structures were popular…. they don’t work nicely together out of the box.

Desandro (who, ironically, is a designer at Twitter), Isotope‘s developer, has recently released a beta for Isotope v.2 and the direction is definitely going towards making the library more accomodating of responsive and fluid layouts.
That said, I still had some trouble to make a full width website work as I wished, while implementing both, but I finally managed to make everything work beautifully.

isotope-8

Also, I am using Infinite Scroll (developed by Paul Irish), imagesLoaded (also developed by Desandro) and WP Imager (developed by me), to accomplish 3 more objectives:

– resize and cache images inside items
– make an endless list of items without needing to click on pagination
– make sure all images inside the items load before firing Isotope (mostly to avoid overlapping of partially formed items, while images are still loading).

All of this, on a WordPress site.

So here I’ll show you how they all work together.

Download and setup in your site, the (latest versions of) necessary scripts:

Isotope v2 beta .
Twitter Bootstrap (or use their CDN)
Infinite Scroll
imagesLoaded
WP Imager (keep in mind that this only works on WordPress)

I have removed pretty much all WordPress related code, so feel free to adapt it to whatever you need it for.

Template file

<div id="iso">
<div class="row">
<div class="post col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="post_img"><img src="#"></div>
<div class="content">
<h2><a href="#">Item Title</a></h2>
</div>
</div>
</div>
<div class="pagination">
<a href="#/page/2/">Next</a>
</div>	
</div>

CSS

#iso {
margin: 0 auto;
width: 100%;
}
/* Browser Support of ':first-of-type' pseudo-class
Chrome 	Safari 	Firefox  Opera 	IE 	Android   iOS
Works 	 3.2+ 	 Works 	  9.5+ 	9+ 	 Works 	 Works
*/
#iso .row:first-of-type {
margin: 0;
}
.post {
margin: 10px 0;
max-width: 100%;
padding: 0;
}
.post .content {
padding: 20px;
}
/* 
* PAGINATION
*/
.pagination {
display: none;
visibility: hidden;
}
/* 
* MEDIA QUERIES
*/
@media (min-width: 768px) and (max-width: 980px) {
#iso .col-md-3, #iso .col-lg-3 {
width: 300px;
}
}
@media (min-width: 980px) and (max-width: 1300px) {
#iso .col-md-3, #iso .col-lg-3 {
width: 350px;
}
}
@media (min-width: 1300px) {
#iso .col-md-3, #iso .col-lg-3 {
width: 400px;
}
}

JS

<script>
$(document).ready(function() {
var $container = $('#iso');
// Fire Isotope only when images are loaded
$container.imagesLoaded(function(){
$container.isotope({
itemSelector : '.post',
masonry: {
isFitWidth: true,
gutter: 20
}
});
});
// Infinite Scroll
$('#iso').infinitescroll({
navSelector  : 'div.pagination', 
nextSelector : 'div.pagination a:first', 
itemSelector : '.post',
bufferPx     : 200,
loading: {
finishedMsg: 'We\'re done here.',
//img: +templateUrl+'ajax-loader.gif'
}
},
// Infinite Scroll Callback
function( newElements ) {
var $newElems = jQuery( newElements ).hide(); 
$newElems.imagesLoaded(function(){
$newElems.fadeIn();
$container.isotope( 'appended', $newElems );
});
});
});
</script>
<!--[if lte IE 8]>
<script>
$(document).ready(function() {
// IE8 compatibility of pseudo-class
$('#iso .row').first().css({margin:'0'});
});
</script>
<![endif]-->

Media Temple Hosting

There’s probably more solutions on how to achieve all of this, however after I researched extensively, this was the only solution that did the trick for me.
So, take all of this and adapt it to your needs!

The Author

Jany Martelli

Solutions Architect, Innovation Consultant, Developer, Professor.
From digital business consulting, to the development of custom IT solutions, to creating the optimal digital corporate environment: I help companies work better and faster, with custom digital tools and comprehensive innovation strategies, since 2009. I work every day with companies worldwide, from SME to corporate. At IED University, I teach how take full advantage of Technology in Digital Communication.