gpt4 book ai didi

Jquery Masonry 无缝响应式图像网格

转载 作者:行者123 更新时间:2023-12-01 00:11:08 25 4
gpt4 key购买 nike

我希望使用 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();
});

它已经实现了,但在某些宽度下它并不能正确填充所有间隙,并且较小的屏幕尺寸需要一些工作。如果有人对如何改进这一点有任何建议或想法,那就太棒了。

最佳答案

同位素布局中可能会出现空白,因为同位素项目在 DOM 中以特定顺序(自上而下)出现,并且 - 如果有项目跨越两列或三列,或者如果有项目不符合列宽 -因此,当调整浏览器大小时,希望按原始顺序重新排列。这可以是seen herehere (with jsfiddle)当浏览器窗口的大小被充分调整时 - 即使如此严格的一致性也会导致在某些浏览器大小下出现一些空白。改组可能会导致最佳拟合,但不一定如此。

可以使用排序来对项目进行排序;为此,它们必须符合一项的宽度和高度倍数(应用适当的边距)。使用 Isotope,您可以拥有 Masonry 以及更多功能,同时它也同样易于实现。最好是考虑布局应该为观看者做什么,也许首先在纸上,然后模拟一个未设计的沙箱,同时牢记模块化问题。

更新如果您使用 Google Chrome 的开发工具检查您的沙箱,您会看到这一点

  1. 您的导航容器没有设置大小;它的大小 x=426/y=469px 仅取决于其内容;您应该在 CSS 中设置一个符合其他项目的大小方案的大小,如果您查看最小公约数,则为 x=240px (240(1), 480(2), 720(3)/y=120px (240(2)、360(3)、720(6))。

  2. 就像我上面提到的,你有跨越多个列和行的元素;因此,在某些浏览器窗口大小下,空隙将是不可避免的。如果您最终选择黑色作为 #isotope-container 背景,这将不太明显,因为黑色是您的自行车图像的背景颜色。

  3. 不知道#twenty-seventh-letter 是如何干扰的,但请参阅 the changed jsfiddle如何在同位素触发布局之前在右侧实现一点点出血。但是,由于布局(砌体、同位素)(这是这里的全部目的),您不能在所有尺寸上都出血 - 为此,您还需要对具有流体宽度的框进行编码,这可以通过一些额外的努力来完成.

关于Jquery Masonry 无缝响应式图像网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12115037/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com