gpt4 book ai didi

jQuery Masonry 不工作。

转载 作者:行者123 更新时间:2023-12-03 23:03:54 27 4
gpt4 key购买 nike

我让它工作,但由于某种原因它停止工作,我不知道我做了什么。盒子 div 向左浮动,我只是不知道我在哪里'出了问题。

Jquery

var $container = $('.work');            
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
isAnimated: true,
columnWidth: 250
});
});

HTML

<div id="part-one" class="work">
<div class="box col2"><img src="_assets/images/one.jpg" alt="" /></a></div>
<div class="box col2"><img src="_assets/images/two.jpg" alt="" /></a></div>
<div class="box col2"><img src="_assets/images/three.jpg" alt="" /></a></div>
<div class="box col2"><img src="_assets/images/four.jpg" alt="" /></a></div>
<div class="box col2"><img src="_assets/images/five.jpg" alt="" /></a></div>
</div>

CSS

.work {
margin-left:98px;
top:0;
max-width:1600px;
padding-bottom:100px;
position:absolute;
}

最佳答案

删除您的columnWidth属性和 Masonry 将使用第一个项目元素的宽度。 (Docs)。

看看这个 JSFiddlehttp://jsfiddle.net/s8PhS/14/

如果您在 JSFiddle 中调整 HTML 容器的大小,它也会动态调整大小。
我还添加了一些额外的<div>用于演示目的的元素和 Odd Five element具有不同的高度,您可以看到砌体插件启动并完美地定位元素。

所以基本上,删除属性 columnWidth: 250并让 Masonry 动态地拾取它。

JSFiddle ,这似乎可以解决您的问题。

<小时/> 提示:我最近使用了同一个 jquery.masonry 插件,但也想对我的元素进行排序,我发现了这个令人惊叹的插件,名为 Isotope这是令人惊奇的并且更加可定制。

Check out the Demo on the Homepage!

关于jQuery Masonry 不工作。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12088733/

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