Question

我认为这是一个非常简单的设置，但不知怎的，我错过了一些东西......

这是传出的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;
}

我希望有人能认出这种伤害，并知道问题可能是什么......

Answer 1

您缺少.grid-sizer，它告诉砌体砌体容器要遵循的单位。搜索＆＃34; grid-sizer＆＃34;在这里：http://masonry.desandro.com/options.html

Answer 2

答案：

如果您自己遇到问题，请检查以下事项：

您是否正确加载了所有库？
jQuery 2，imagesLoaded 4，Masonry 4
容器的宽度和内部元素的宽度是否允许元素并排浮动？可以在CSS中创建装订线，其中sum(~isnan(data),1)和margin-right应用于margin-left和.element:nth-child(odd) {}以获得两列布局。当有更多时，内部列都应用了两个边距。
始终使用jQuery替代方法而不是HTML类方式。定制更好。

砌体破碎（可能是经典）

2 个答案: