jquery - JQuery Isotope - レスポンシブ グリッドでフィルタリングするとギャップが消える

Question

私は Isotope と協力して、http://samsnow.alwaysdata.net/galerieにレスポンシブ ギャラリーを作成しています。他の人がどのようにそれを行ったかをstackoverflowで調べ、独自のコードを作成しましたが、ここで助けが必要です。

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

});

画像に % width を使用し、可変数の列を使用しているため、フィルターにバグがあります。フィルターをクリックすると、画像間のギャップのほとんどが消えます。これは、フィルターをもう一度クリックするか、わずかなウィンドウのサイズを変更することで修正されます。

何が起こっているのかわかりません。誰かが私を助けてくれますか？

編集：これがフィドルです：http://jsfiddle.net/SamSnow/8Am8N/1/