jQuery的砌体无缝响应图像网格(Jquery Masonry Seamless Responsi

我期待创造一个无缝的使用jquery砖石，那里的图像是充分响应，并不同宽度的（无檐沟）的全屏图片网格。我发现了几个其他的出发点在那里，但它证明是我的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();
    });

它到达那里，但在扁平它不是填补所有空白的，而较小的屏幕尺寸需要一些工作。如果任何人有关于如何提高这任何提示或想法，那将是惊人的。

Answer 1:

在同位素布局空洞可以发生，因为同位素的项目出现在DOM一定的顺序（自上而下）和 - 如果有跨越两列或两三个项目，或者是否有项目不符合列的宽度 - 因此要rearrage在原来的顺序，当浏览器大小。这可以在这里看到或点击这里（用的jsfiddle）时充分调整浏览器窗口-可能会导致在某些浏览器尺寸有些空洞甚至这样严格遵守。洗牌可能导致最优的配合，但未必如此。

人们可以使用排序订购的物品; 对于工作时，他们必须符合的宽度和高度一个项的倍数（应用适当的余量）。同位素，你有砖石以及更多的功能，同时它也同样容易实现。最好是考虑布局应为观众做什么，也许在纸面上，然后再模拟了一个无意中沙箱，保持模块化的问题记在心里。

UPDATE如果您检查与谷歌Chrome的devtools沙箱，你会看到

你的资产净值的容器没有大小设置; 它的大小为x = 426 / Y = 469px只取决于它的内容; 应设置在CSS的尺寸符合你的其他项目的施胶方案，该方案，如果你看的最小公约数，为x = 240像素（240（1），480（2），720（3）/ Y = 120像素（240（2），360（3），720（6））。
像我上面提到的，必须跨越多个列和行的元素; 因此，在特定的浏览器窗口大小，空隙将不可避免。如果选择黑色作为最终＃同位素容器的背景下，这将不太明显，如黑色是你的自行车图片的背景颜色。
不知道＃第二十七届字母怎么干涉，但看到了改变的jsfiddle如何实现渗色的一点点右边同位素触发布点之前。但是，由于布点的（砌体，同位素），在这里是整个的目的，你可以不用在各种规模流血 - 对于这一点，你需要用流体宽度也可以与一些额外的努力来完成的代码盒。