我正在寻找使用 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();
});
它已经到了那里，但是在某些宽度上它并没有正确地填补所有的空白，并且较小的屏幕尺寸需要一些工作。如果有人对如何改进这一点有任何提示或想法，那将是惊人的。