Masonry broken（可能是经典）

Question

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

这是即将离任的HTML。这是一个简单的固定宽度 2 列布局：

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

masonry 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，它告诉砖石砌体容器要遵循的单位。在此处搜索 "grid-sizer"：http://masonry.desandro.com/options.html

Answer 2

答案：

如果您运行自己解决我的问题，请检查这些内容：

您是否已正确加载所有库？
jQuery 2、imagesLoaded 4、Masonry 4
容器的宽度和里面元素的宽度是否允许元素并排浮动？可以在 CSS 中制作间距，将 margin-right 和 margin-left 应用于 .element:nth-child(odd) {} 和 .element:nth-child(even) {} 以实现两列布局。当有更多时，内部列将应用两个边距。
始终使用 jQuery 替代方法而不是 HTML class 方法。还是自定义比较好。

Masonry broken（可能是经典）

Masonry broken (probably a classic)

html

javascript

css

jquery

masonry