JQuery Isotope - gaps disappear when filtering with a responsive grid

Question

I'm working with Isotope to create a responsive gallery on http://samsnow.alwaysdata.net/galerie. I looked up on stackoverflow how other people did that and I made my own piece of code but I need some help here please.

jQuery(document).ready(function($){ 

var $container = jQuery('#containerGalerie');
var columns = 4,
setColumns = function() { 
        screen = jQuery(window).width();
        if(screen>1630){
            columns = 5;
        }
        else if(screen>1280){
            columns = 4;
        }
        else if(screen>710){
            columns = 3;
        } 
        else if(screen>345){
            columns = 2;
        }
        else{
            columns = 1;
        };
        largeur=100/columns - 0.5;
        jQuery('.element').css('width', getLargeur);
        function getLargeur(){
            return largeur +'%';
        }
    };
setColumns();

jQuery(window).smartresize(function(){
    setColumns();
    $container.isotope({
         itemSelector : '.element',
        resizable: false, // disable normal resizing
          // set columnWidth to a percentage of container width
          masonry: { columnWidth: $container.width() / columns}
    });     
}).smartresize();

$container.imagesLoaded( function(){
    jQuery(window).smartresize();     
});


var $optionSets = jQuery('.option-set'),
$optionLinks = $optionSets.find('a');

$optionLinks.click(function(){  
    var $this = jQuery(this);
    // don't proceed if already selected
    /*
    if ( $this.parent().hasClass('active') ) {
        return false;
    }*/

    var $optionSet = $this.parents('.option-set');
    $optionSet.parent().find('.active').removeClass('active');
    $this.parent().addClass('active');

    // make option object dynamically, i.e. { filter: '.my-filter-class' }
    var options = {},
    key = $optionSet.attr('data-option-key'),
    value = $this.attr('data-option-value');
    // parse 'false' as false boolean
    value = value === 'false' ? false : value;
    options[ key ] = value;
    if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
        // changes in layout modes need extra logic
        changeLayoutMode( $this, options );
    } else {
        // otherwise, apply new options
        $container.isotope( options );
    }
    jQuery(".isotope-item a").attr("rel", "visible");
    jQuery(".isotope-hidden a").attr("rel", "nonvisible"); 
    jQuery(window).smartresize(); 
    return false;
});  

});

Since I use % width for my images and a variable number of columns I've a bug on the filter. After a click on a filter the most of the gaps between images disappear. This is fixed with another click on the filter, or even a sligth window resizing.

I don't understand what's happening. Does someone could help me please?

edit : Here is the Fiddle : http://jsfiddle.net/SamSnow/8Am8N/1/

Answer 1

I found where the problem is : it's the transition from a filter with a lot of images (my page has a scrollbar) to another one with few images(=no scrollbar). When the scrollbar appear/disappear there is no refresh! Unfortunately I have'nt managed to fix it.

I rely on your help!