gpt4 book ai didi

javascript - Masonry broken(可能是经典)

转载 作者:行者123 更新时间:2023-11-28 06:28:42 27 4
gpt4 key购买 nike

我认为这是一个非常简单的设置,但不知何故我遗漏了一些东西......

这是传出的 HTML。这是一个简单的固定宽度 2 列布局:

<div class="container_12">
<div class="grid_masonry"> ... </div>
<div class="grid_masonry"> ... </div>
<div class="grid_masonry"> ... </div>
...
</div>

砖石 JS 链接在 <head> 中(也是 jQuery,只是为了保存):

<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.12.0.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/masonry.pkgd.min.js"></script>

Te 脚本加载正常。

这就是调用效果的方式:

<div class="container_12" data-masonry='{ "itemSelector": ".grid_masonry" }'>

我试图通过 jQuery(下面的代码)调用它,但它什么也没做,甚至连一个损坏的效果都没有。

$('.container_12').masonry({
itemSelector: '.grid_masonry'
});

这是网格元素的 CSS:

.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}

...

.grid_masonry {
margin-bottom: 32px;
float: left;
width: 380px;
}

.grid_masonry:nth-child(odd) {
/* gutter */
margin-right: 160px;
}

我希望有人能识别损坏并知道问题可能是什么......

最佳答案

您缺少 .grid-sizer,它告诉 masonry , masonry 容器的单位是什么。在此处搜索“grid-sizer”:http://masonry.desandro.com/options.html

关于javascript - Masonry broken(可能是经典),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35119184/

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