Jquery无缝响应图像网格

我希望使用jquery砌体创建一个无缝（无水槽）的全屏图像网格，其中的图像是完全响应的，并且具有不同的宽度。我已经找到了另外两个起点，但对于我的jquery知识量来说，这是相当困难的

这就是我想要的：

这就是我到目前为止所做的：

HTML（仅一部分）：

下面是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();
    });

jQuery（文档）.ready（函数（$）{
var CollManag=（函数（）{
var$ctCollContainer=$（“#砌体容器”），
collCnt=1，
init=函数（）{
changeColCnt（）；
initEvents（）；
initPlugins（）；
},
changeColCnt=函数（）{
var w_w=$（窗口）.width（）；
如果（w_w同位素布局中可能出现空洞，因为同位素项目以特定顺序出现（自上而下）在DOM中，如果存在跨越两列或三列的项目，或者存在不符合列宽的项目，则在调整浏览器大小时，希望按照原始顺序重新排列。这可以是，也可以是当浏览器窗口大小调整到足够大时，即使如此严格的一致性也可能会导致某些浏览器大小的空白洗牌可能会产生最佳的配合，但不一定如此

可以使用排序对项目进行排序；要使其正常工作，它们必须符合一个项目的宽度和高度倍数（应用适当的边距）.有了同位素，你就有了砖石加上更多的功能，同时也很容易实现。最好是考虑一下布局应该为观众做些什么，也许是在纸上，然后模拟一个未设计的沙箱，记住模块化问题

更新如果你用谷歌Chrome的devtools检查你的沙盒，你会看到

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

正如我上面提到的，您的元素跨越多个列和行；因此，在特定的浏览器窗口大小下，将不可避免地出现空洞。如果您最终选择黑色作为#同位素容器背景，这将不太明显，因为黑色是自行车图像的背景色

我不知道第二十七个字母是怎么干扰的，但是你看
如何在同位素触发布局之前在右侧实现一点出血。但是，由于布局（砌石，同位素），这是这里的全部目的，您不能有所有大小的出血-为此，您还需要使用流体宽度编码框，这可以通过一些额外的努力来完成

流体/响应性布局、不同宽度的框以及同位素/砌体的问题似乎是一个缺陷。如果您的项目宽度等于浏览器窗口的全宽，但为十进制像素值，则存在问题

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

在这里，它正在发挥作用：

有关此bug的更多信息（希望有一天能够修复），请查看github专门发布的版本：
可能是错误的建议，但您是否考虑过作为替代方案？有些差距（由于黑色背景，在沙箱中很难看到）是由于您的同位素项目有时宽度小于一列，因此差距是不可避免的，除非您在同位素项目大小方面使用匹配的模块化。请参阅（拉小提琴）或者谢谢你的想法，@Systembolaget。wookmark的例子没有显示可变宽度的项目，所以我想知道它是否值得尝试。根据你的经验，你认为我尝试同位素会更好吗？我不认为我需要它，因为我不做任何过滤，但也许它提供了一些有用的东西……而且我将使我的背景为白色，这样间隙更容易识别。另外，这里有一个静态宽度的版本（我不反对）-仍然有问题。你的小提琴与同位素和固定宽度/高度似乎比这次尝试要好-你认为复制你的小提琴并为不同的尺寸设置特定的宽度/高度会产生更好的结果吗？我只是不确定，因为我有4个不同大小的盒子…在下面添加了“答案”。想想尺寸（项目之间的关系）关于你是否可以用更小的随机大小的“块”来完成你的设计。感谢同位素示例-我想我会尝试一下。我对一些间距没问题，只是希望尽可能减少它（该演示做得很好）。我会让你知道它是如何进行的。非常感谢！如果你的元素没有空白，它们会相互对峙，请参阅另一个使用同位素的代码示例，它看起来要好得多-。我仍然有一个侧面的空间问题，偶尔在框内，但这是一个改进。有没有想过让它流血到正确的位置所有窗口大小的ge？更新了答案，提供了更多的解释和JSFIDLE。从中，很容易理解所有内容。非常感谢@Systembolaget。我在某个时候指定了导航容器的宽度……没有意识到它丢失了。对容器的负右边距进行了有趣的思考。当然有助于消除宽度关于右边的空间。就创建流体宽度框而言，这是整个过程中最大的障碍。我曾尝试使用流体/响应同位素的例子，但它受到了各种各样的打击-。我所有的百分比似乎都是正确的…尽管如此
.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(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();
    });