jQuery砌体无缝响应图像网格 [英] Jquery Masonry Seamless Responsive Image Grid
问题描述
我正在寻找使用jquery石工创建无缝的(无装订线)全屏图像网格的方法，其中图像具有充分的响应能力并且宽度可变.我在那里找到了其他几个起点，但是事实证明，对我来说，掌握jQuery的知识相当困难.
I'm looking to create a seamless (no gutters) fullscreen image grid using jquery masonry, where the images are fully responsive and are of varying widths. I've found a couple other starting points out there, but it's proving to be quite difficult for my amount of jquery knowledge.
这就是我要的: http://future.thefutureforward.com/~cycles/assets/images/HUB0002_dAutremont_4WEB .jpg
这是我到目前为止所拥有的: http://future.thefutureforward.com/~cycles/archive-test-fluid .html
And this is what I have so far: http://future.thefutureforward.com/~cycles/archive-test-fluid.html
HTML(仅一部分):
HTML (just a portion):
<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:
And here's the jQuery that's doing most the heavy-lifting:
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();
});
它到达了那里，但是在某些宽度下，它并不能完全填补所有空白，并且较小的屏幕尺寸需要一些工作.如果有人对如何改进它有任何建议或想法，那将是惊人的.
It's getting there, but at certain widths it's not filling all of the gaps properly, and smaller screen sizes need some work. If anyone has any tips or thoughts on how to improve this, that would be amazing.
推荐答案
同位素布局中可能会出现空隙，因为同位素项以一定顺序(自上而下)在DOM中出现-如果存在跨越两列的项，或者-三，或者如果某些项目不符合列宽-因此，在调整浏览器大小时，要按原始顺序重新排列.可以是 在此处 或
Voids in Isotope layouts can occur, because the Isotope items appear in a certain order (top down) in the DOM and - if there are items spanning two columns or three, or if there are items not conforming to the column width - therefore want to rearrage in that original order, when the browser is resized. This can be seen here or here (with jsfiddle) when the browser window is resized sufficiently - even such strict conformity can result in some voids at certain browser sizes. Shuffling could result in an optimal fit, but not necessarily so.
一个人可以使用排序来排序商品；为此，它们必须符合一项的宽度和高度的倍数(应用适当的边距).使用同位素，您可以拥有石工以及更多的功能，同时它也同样易于实现.最好的办法是考虑布局对于观众的作用，也许首先是在纸上，然后模拟一个未设计的沙箱，同时牢记模块化问题.
One could use sorting to order the items; for that to work, they must conform to width and height multiples of one item (with appropriate margins applied). With Isotope, you have Masonry plus much more functionality while it is similarly easy to implement. Best is to think about what the layout should do for the viewer, maybe on paper first, then mock-up an undesigned sandbox, keeping the modularity issue in mind.
更新，如果您使用Google Chrome浏览器的devtool检查沙盒，则会看到
UPDATE If you examine your sandbox with Google Chrome's devtools, you'll see that
-
您的导航容器没有设置大小；它的大小x = 426/y = 469px仅取决于其内容；您应该在CSS中设置一个与其他项目的尺寸调整方案相符的尺寸，如果您看最小的公约数，则该尺寸应为x = 240px(240(1)，480(2)，720(3)/y = 120px (240(2)，360(3)，720(6)).
your nav-container has no size set; it's size x=426/y=469px only depends on its content; you should set a size in CSS that conforms to the sizing scheme of your other items which, if you look the smallest common divisor, is x=240px (240(1), 480(2), 720(3)/y=120px (240(2), 360(3), 720(6)).
，您有跨越多个列和行的元素；因此，在某些浏览器窗口大小下，空隙是不可避免的.如果最后选择黑色作为#isotope-container背景，这将不太明显，因为黑色是自行车图像的背景色.
like i mentioned above, you have elements spanning multiple columns and rows; therefore at certain browser window sizes, voids will be inevitable. If you select black as #isotope-container background in the end, this will be less noticeable, as black is your bike images background colour.
不知道第二十七个字母是如何干扰的，但请参见更改后的jsfiddle 在同位素触发布局之前，如何在右侧实现一点点出血.但是，由于布局(砌体，同位素)是这里的全部目的，因此您不可能在所有大小上都流血-为此，您还需要编写具有流体宽度的框，这可以通过一些额外的工作来完成. .
don't know how that #twenty-seventh-letter interferes, but see the changed jsfiddle how to achieve a little bit of bleed on the right before Isotope triggers layouting. But, because of layouting (Masonry, Isotope), which is the whole purpose here, you can not have bleed at all sizes - for that, you'd need to code boxes with fluid widths also, which can be done with some extra effort.
这篇关于jQuery砌体无缝响应图像网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
