Jquery Masonry 无缝响应式图像网格

Question

我希望使用 jquery masonry 创建一个无缝(无装订线)全屏图像网格，其中图像完全响应且宽度不同。我在那里找到了其他几个起点，但事实证明，这对于我的 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 中以特定顺序(自上而下)出现，并且 - 如果有项目跨越两列或三列，或者如果有项目不符合列宽 -因此，当调整浏览器大小时，希望按原始顺序重新排列。这可以是seen here或here (with jsfiddle)当浏览器窗口的大小被充分调整时 - 即使如此严格的一致性也会导致在某些浏览器大小下出现一些空白。改组可能会导致最佳拟合，但不一定如此。

可以使用排序来对项目进行排序；为此，它们必须符合一项的宽度和高度倍数(应用适当的边距)。使用 Isotope，您可以拥有 Masonry 以及更多功能，同时它也同样易于实现。最好是考虑布局应该为观看者做什么，也许首先在纸上，然后模拟一个未设计的沙箱，同时牢记模块化问题。

更新如果您使用 Google Chrome 的开发工具检查您的沙箱，您会看到这一点

1. 您的导航容器没有设置大小；它的大小 x=426/y=469px 仅取决于其内容；您应该在 CSS 中设置一个符合其他项目的大小方案的大小，如果您查看最小公约数，则为 x=240px (240(1), 480(2), 720(3)/y=120px (240(2)、360(3)、720(6))。

2. 就像我上面提到的，你有跨越多个列和行的元素；因此，在某些浏览器窗口大小下，空隙将是不可避免的。如果您最终选择黑色作为 #isotope-container 背景，这将不太明显，因为黑色是您的自行车图像的背景颜色。

3. 不知道#twenty-seventh-letter 是如何干扰的，但请参阅 the changed jsfiddle 如何在同位素触发布局之前在右侧实现一点点出血。但是，由于布局(砌体、同位素)(这是这里的全部目的)，您不能在所有尺寸上都出血 - 为此，您还需要对具有流体宽度的框进行编码，这可以通过一些额外的努力来完成.