砌体坏了(可能是经典）

Masonry broken (probably a classic)

本文关键字：经典 坏了      更新时间：2023-09-26

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

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

脚本正常加载。

以下是调用效果进行操作的方式：

<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，它告诉砌体容器要遵循的单位是什么。在此处搜索"网格大小"： http://masonry.desandro.com/options.html

答案：

如果您自己遇到我的问题，请检查这些内容：

  • 您是否正确加载了所有库？
    jQuery 2， imagesLoaded 4， Masonry 4

    • 容器的宽度

  • 和内部元素的宽度是否允许元素并排浮动？装订线可以在 CSS 中制作，margin-right和margin-left应用于两列布局的.element:nth-child(odd) {}和.element:nth-child(even) {}。当有更多时，内列将应用两个边距。

  • 始终使用 jQuery 替代方法而不是 HTML 类方式。

    • 最好定制。
相关文章：