jquery - ブラウザの更新後にjqueryの石積みのガターが拡大する

Question

Masonry の応答性を向上させる作業が進んでいると思っていたのと同じように...

私はこのコードで Masonry を呼び出しています:

jQuery(document).ready(function($) {
var CollManag = (function() {
    var $ctCollContainer = $('#grid'),
    collCnt = 1,
    init = function() {
        changeColCnt();
        initEvents();
        initPlugins();
    },
    changeColCnt = function() {
        var w_w = $(window).width();
        if( w_w <= 480 ) n = 1;
        else if( w_w <= 700 ) n = 2;
        else n = 3;
    },
    initEvents = function() {
        $(window).on( 'smartresize.CollManag', function( event ) {
            changeColCnt();
        });
    },
    initPlugins = function() {
        $ctCollContainer.imagesLoaded( function(){
            $ctCollContainer.masonry({
                itemSelector : '.box_item',
                columnWidth : function( containerWidth ) {
                    return containerWidth / n;
                },
                isAnimated : true,
                animationOptions: {
                    duration: 250
                }
            });
        });

    };
    return { init: init };
})();
CollManag.init();

});

ビューポートの幅に基づいて石積みの柱を変更します。

HTML/CSS を削除して、div (.box_item) にいくつかの画像をラップするだけにしました。これらの div にはパーセンテージ ベースの幅があります (% を使用したブラウザーの四捨五入の問題を認識しています)。

ブラウザの幅を狭くすると、それに応じてグリッドが 3、2、1 列に変わりました。私はコンテナ間の間隔に特に満足していました (すべてが均等に見えました)。

ブラウザーのサイズを 700px に縮小すると、すべてのガターが等しくなります (ブラウザーが私の寸法を四捨五入するため、右端が少し大きくなります)。このビュー ポートでブラウザを更新すると、ガターの幅がわずかに変わりました。ブラウザのサイズを 1px ずつ変更すると、グリッドの間隔がリセットされました。

特定のビューポートにアクセスする人々は、ブラウザのサイズを変更するよりも重要です:)何がこの問題を引き起こしているのでしょうか? すべてを削除したので、99% は CSS に関連していないことを確信しています。

更新：元のスクリプトを以下のスクリプトに置き換えました（問題は解決しません）：

// load masonry / change layout based on view port
$(document).ready(function(){
    var $container = $('#grid');
    var gutter = 20;
    var min_width = 230;
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.box_item',
            gutterWidth: gutter,
            isAnimated: true,
              columnWidth: function( containerWidth ) {
                var box_width = (((containerWidth - 2*gutter)/3) | 0) ;

                if (box_width < min_width) {
                    box_width = (((containerWidth - gutter)/2) | 0);
                }

                if (box_width < min_width) {
                    box_width = containerWidth;
                }

                $('.box_item').width(box_width);

                return box_width;
              }
        });
    });
});