Jquery Masonry 无缝响应式图像网格
[英] Jquery Masonry Seamless Responsive Image Grid
本文介绍了Jquery Masonry 无缝响应式图像网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望使用 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 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="#">精选</a></li><li><a href="#">进程</a></li><li><a href="#">存档</a></li><li><a href="#" class="active">博客</a></li>
<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 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 class="box"><a href="#"><img src="assets/images/archive-thumbs/three.jpg" alt=""title=""/><span class="bike-name"><span>Bicycle #003</span></span></a>
每个盒子"的 CSS:
.box{边距:0px 0px 0px 0px;填充:0px；向左飘浮;最大宽度:33.3%；/* 因为我们要进行三个交叉... */}.box img {边距:0px 0px 0px 0px;填充:0px；最大宽度:100%；显示:块；}
这是最重要的 jQuery:
jQuery(document).ready(function($) {var CollManag = (function() {var $ctCollContainer = $('#masonry-container'),collCnt = 1,初始化 = 函数(){changeColCnt();initEvents();初始化插件()；},changeColCnt = 函数(){var w_w = $(window).width();如果( w_w <= 600 ) n = 2;否则 n = 3;},initEvents = 函数(){$(window).on('smartresize.CollManag', function( event ) {changeColCnt();});},initPlugins = 函数(){$ctColContainer.imagesLoaded( function(){$ctColContainer.masonry({itemSelector : '.box',列宽:函数(容器宽度){返回容器宽度/n；},isAnimated : 真,动画选项:{持续时间:300}});});};返回{初始化:初始化}；})();CollManag.init();});
它正在到达那里，但在某些宽度下它不能正确填充所有间隙，并且较小的屏幕尺寸需要一些工作.如果有人对如何改进这一点有任何提示或想法，那就太棒了.
解决方案
同位素布局中可能会出现空隙，因为同位素项目在 DOM 中以特定顺序(自上而下)出现，并且 - 如果项目跨越两列或三，或者如果有不符合列宽的项目 - 因此想要在调整浏览器大小时按原始顺序重新排列.这可以在这里看到或此处(使用 jsfiddle) 当浏览器窗口的大小被充分调整时 - 即使如此严格的一致性也会导致某些空白浏览器大小.改组可能会导致最佳拟合，但不一定如此.
可以使用排序来对项目进行排序；为此，它们必须符合一项的宽度和高度倍数(应用适当的边距).使用 Isotope，您拥有 Masonry 以及更多功能，同时它同样易于实施.最好的办法是考虑布局应该为查看者做什么，也许首先在纸上，然后模拟一个未设计的沙箱，牢记模块化问题.
更新如果您使用 Google Chrome 的开发工具检查您的沙箱，您会看到
你的导航容器没有设置大小；它的大小 x=426/y=469px 只取决于它的内容；您应该在 CSS 中设置一个符合其他项目的尺寸方案的尺寸，如果您看起来最小公约数，则为 x=240px (240(1), 480(2), 720(3)/y=120px)(240(2)、360(3)、720(6)).
就像我上面提到的，你有跨越多列和多行的元素；因此在某些浏览器窗口大小下，空隙将是不可避免的.如果您最后选择黑色作为 #isotope-container 背景，这将不太明显，因为黑色是您的自行车图片背景色.
不知道 #twenty-seventh-letter 是如何干扰的，但请参阅 更改后的 jsfiddle如何在 Isotope 触发布局之前在右侧实现一点出血.但是，由于布局(Masonry、Isotope)，这是这里的全部目的，您不能在所有尺寸上流血 - 为此，您还需要对具有流体宽度的框进行编码，这可以通过一些额外的努力来完成.
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.
This is what I'm going for:
http://future.thefutureforward.com/~cycles/assets/images/HUB0002_dAutremont_4WEB.jpg
And this is what I have so far:
http://future.thefutureforward.com/~cycles/archive-test-fluid.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 for each "box":
.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;
}
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.
解决方案
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.
UPDATE If you examine your sandbox with Google Chrome's devtools, you'll see that
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)).
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.
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 Masonry 无缝响应式图像网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
