Jquery Masonry无缝响应图像网格

我希望使用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();
    });

它正在实现这一目标，但在某些宽度下，它并不能正确填充所有间隙，较小的屏幕尺寸需要一些工作。如果有人对如何改进这一点有任何建议或想法，那将是令人惊讶的。

同位素布局中可能会出现空白，因为同位素项目在DOM中按特定顺序（从上到下）出现，并且如果有跨越两列或三列的项目，或者如果有不符合列宽的项目，则在调整浏览器大小时，希望按原始顺序重新排列。当浏览器窗口的大小足够大时，这可以在此处看到或在此处看到（使用jsfiddle）-即使如此严格的一致性也可能在某些浏览器大小下导致一些空白。洗牌可能会产生最佳配合，但不一定如此

可以使用排序来排序项目；要做到这一点，它们必须符合一个项目的宽度和高度倍数（应用适当的边距）。使用同位素，您可以获得Masonry和更多的功能，同时它也同样易于实现。最好的办法是考虑布局应该为观众做什么，也许先在纸上，然后模拟一个未设计的沙盒，记住模块化问题。

更新如果你用谷歌Chrome的开发工具检查你的沙箱，你会看到

您的导航容器没有设置大小；它的大小x=426/y=469px仅取决于它的内容；您应该在CSS中设置一个大小，该大小符合其他项目的大小调整方案，如果您查看最小的公约数，则为x=240px（240（1），480（2），720（3）/y=120px（240。
就像我上面提到的，您有跨越多个列和行的元素；因此，在特定的浏览器窗口大小下，空洞将是不可避免的。如果你最终选择黑色作为#同位素容器背景，这将不那么明显，因为黑色是你自行车图像的背景颜色。
不知道第二十七个字母是如何干扰的，但看看更改后的jsfiddle如何在同位素触发布局之前在右侧实现一点出血。但是，由于布局（砖石、同位素），这就是这里的全部目的，你不可能有任何大小的出血——为此，你还需要用流体宽度对方框进行编码，这需要付出一些额外的努力。

流体/响应布局、不同宽度的盒子和同位素/砖石结构的问题似乎是一个错误。如果项目宽度等于浏览器窗口的全宽，但为十进制像素值，则存在问题。

我最终做的是将三个可变宽度列分别设置为19.5%、39.5%和59.5%。这解决了我之前遇到的随机间隙问题（尽管它确实引入了排水沟，我对此并不太感兴趣）。

它在这里发挥作用：http://cyclesdautremont.com/blog/

有关这个错误的更多信息（希望有一天能修复），请查看专门针对它的同位素github问题：https://github.com/desandro/isotope/issues/222

相关内容

最新更新

热门标签：