Jquery砌体无缝响应图像网格
我正在寻找使用jquery砌体创建无缝（无沟槽）全屏图像网格，其中图像是完全响应的并且具有不同的宽度。 我已经找到了其他几个起点，但事实certificate我的jquery知识非常困难。
这就是我想要的： http ： //future.thefutureforward.com/~cycles/assets/images/HUB0002_dAutremont_4WEB.jpg
这就是我到目前为止： http ： //future.thefutureforward.com/~cycles/archive-test-fluid.html
HTML（只是一部分）：
每个“盒子”的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中以特定顺序（自上而下）出现，并且 – 如果有跨越两列或三列的项目，或者如果有不符合列宽的项目 – 因此希望当浏览器resize时，以原始顺序重新启动。 当浏览器窗口充分resize时，可以在此处或此处（使用jsfiddle） 看到这一点 – 即使这种严格的一致性也可能导致某些浏览器大小的某些空洞。 改组可以产生最佳匹配，但不一定如此。
人们可以使用排序来订购物品; 要使其工作，它们必须符合一个项目的宽度和高度倍数（应用适当的边距）。 使用Isotope，您可以使用Masonry以及更多function，同时也可以轻松实现。 最好是考虑布局应该为观众做什么，可能先在纸面上，然后模拟一个不受欢迎的沙箱，牢记模块化问题。
更新如果您使用Google Chrome的devtools检查沙箱，您会看到
-
你的nav-container没有设置大小; 它的大小x = 426 / y = 469px仅取决于其内容; 你应该在CSS中设置一个符合其他项目大小的方案，如果你看一下最小的公约数，那就是x = 240px（240（1），480（2），720（3）/ y = 120px （240（2），360（3），720（6））。
-
就像我上面提到的，你有多个列和行的元素; 因此，在某些浏览器窗口大小，空隙将是不可避免的。 如果你最后选择黑色作为＃isotope-container背景，这将不太明显，因为黑色是你的自行车图像背景颜色。
-
不知道第二十七个字母如何干扰，但看到改变的jsfiddle如何在Isotope触发布局之前在右边实现一点点流血。 但是，由于布局（砌体，同位素），这是这里的全部目的，你不能在所有尺寸上出血 – 为此，你需要编码具有流体宽度的盒子，这可以通过一些额外的努力来完成。
流体/响应布局，不同宽度的盒子和同位素/砌体的问题似乎是一个错误。 如果您的项目宽度等于浏览器窗口的整个宽度但是以十进制像素值为单位，则存在问题。
我最终做的是分别设置三个可变宽度列，分别为19.5％，39.5％和59.5％。 这修复了我之前遇到的随机间隙问题（虽然它确实引入了我不太注意的排水沟）。
它正在运行： http ： //cyclesdautremont.com/blog/
有关此错误的更多信息（并希望有一天能修复），请查看专用于它的同位素github问题： https ： //github.com/desandro/isotope/issues/222