Jquery砌体无缝响应图像网格

这就是我想要的：
http://future.thefutureforward.com/~cycles/assets/images/HUB0002_dAutremont_4WEB.jpg

这就是我到目前为止所拥有的：
http://future.thefutureforward.com/~cycles/archive-test-fluid.html

HTML(只是一部分)：

<div id="masonry-container">  
    <div class="Box nav-container">
        <div id="bumble-bee-sub"><a href="[[~1]]"><img src="assets/img/bumble_bee.png" alt="Cycles d'Autremont" title="Cycles d'Autremont" /></a></div>
        <ul id="nav-masonry">
            <li><a href="#">Featured</a></li>
            <li><a href="#">Process</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#" class="active">Blog</a></li>
        </ul>
    </div>  
    <div class="Box">
        <a href="#">
            <img src="assets/images/archive-thumbs/one.jpg" alt="" title="" />
            <span class="bike-name"><span>Bicycle #001</span></span>
        </a>
    </div>
    <div class="Box">
        <a href="#">
        <img src="assets/images/archive-thumbs/two.jpg" alt="" title="" /> 
        <span class="bike-name"><span>Bicycle #002</span></span>
        </a>
    </div>
    <div class="Box">
        <a href="#">
        <img src="assets/images/archive-thumbs/three.jpg" alt="" title="" />
        <span class="bike-name"><span>Bicycle #003</span></span>
        </a>
    </div>
</div>

每个“盒子”的CSS：

.Box{
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
max-width: 33.3%; /* since we're going for three across... */
}
.Box img {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    max-width:100%;
    display:block;
}

这里是最重要的jQuery：

jQuery(document).ready(function($) {
        var CollManag = (function() {
            var $ctCollContainer = $('#masonry-container'),collCnt = 1,init = function() {
                changeColCnt();
                initEvents();
                initPlugins();
            },changeColCnt = function() {
                var w_w = $(window).width();
                if( w_w <= 600 ) n = 2;
                else n = 3;
            },initEvents = function() {
                $(window).on( 'smartresize.CollManag',function( event ) {
                    changeColCnt();
                });
            },initPlugins = function() {
                $ctCollContainer.imagesLoaded( function(){
                    $ctCollContainer.masonry({
                        itemSELEctor : '.Box',columnWidth : function( containerWidth ) {
                            return containerWidth / n;
                        },isAnimated : true,animationOptions: {
                            duration: 300
                        }
                    });
                });
            };
            return { init: init };
        })();
        CollManag.init();
    });

它已经到了那里,但在某些宽度下,它并没有正确填补所有间隙,而较小的屏幕尺寸需要一些工作.如果有人对如何改进这一点有任何提示或想法,那将是惊人的.