Question

我正在寻找使用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中以特定顺序（自上而下）出现，并且 - 如果有跨越两列或三列的项目，或者如果有不符合列宽的项目 - 因此，当浏览器调整大小时，希望以原始顺序重新启动。当浏览器窗口充分调整大小时，这可以是seen here或here (with jsfiddle) - 即使这种严格的一致性也可能导致某些浏览器大小的某些空白。改组可能会产生最佳匹配，但不一定如此。

可以使用排序来订购物品;要使其工作，它们必须符合一个项目的宽度和高度倍数（应用适当的边距）。使用Isotope，您可以使用Masonry以及更多功能，同时也可以轻松实现。最好的想法是考虑布局应该为观众做什么，可能先在纸面上，然后模拟一个不受欢迎的沙箱，牢记模块化问题。

更新如果您使用Google Chrome的devtools检查沙箱，您会看到

您的导航容器没有设置尺寸;它的大小x = 426 / y = 469px仅取决于其内容;你应该在CSS中设置一个符合其他项目大小的方案，如果你看看最小公约数，则x = 240px（240（1），480（2），720（3）/ y = 120px （240（2），360（3），720（6））。
就像我上面提到的，你有多个列和行的元素;因此，在某些浏览器窗口大小，空隙将是不可避免的。如果你最后选择黑色作为＃isotope-container背景，这将不太明显，因为黑色是你的自行车图像背景颜色。
不知道第二十七封信是如何干扰的，但请看the changed jsfiddle 如何在Isotope触发布局之前在右侧实现一点点流血。但是，由于布局（砌体，同位素），这是这里的全部目的，你不能在所有尺寸上出血 - 为此，你需要编码具有流体宽度的盒子，这可以通过一些额外的努力来完成

Answer 2

流体/响应式布局，不同宽度的盒子和同位素/砌体的问题似乎是一个错误。如果您的项目宽度等于浏览器窗口的整个宽度但是是十进制像素值，则会出现问题。

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

这里有效： http://cyclesdautremont.com/blog/

有关此错误的更多信息（希望有一天可以修复），请查看专用的同位素github问题： https://github.com/desandro/isotope/issues/222

Jquery砌体无缝响应图像网格

2 个答案: