Question

更新我在此代码段中添加了@Alice answser，以说明为什么以及为什么我要使用瓦工。瓦工仅修改第一个briklayer，但完全忽略了第二个{i1}，我可以理解，因为我使用的是querySelector。

但是即使添加了@Alice的答案，结果仍然相同。我已经尝试过masonry，但它弄乱了我的卡的布局。所以我在这里停留在bricklayer

这是修改后的版本。

$(document).ready(function() {
      $(document).on('click', '#post-link', function posts(event) {
        event.preventDefault();
        $(this).addClass('underlined');
        $('#project-link').removeClass('underlined');
        $('#post-card').slideDown();
        $('#project-card').slideUp();
      });
      $(document).on('click', '#project-link', function projects(event) {
        event.preventDefault();
        $(this).addClass('underlined');
        $('#post-link').removeClass('underlined');
        $('#post-card').slideUp();
        $('#project-card').slideDown();
      });
    });
    const bricklayers = []
        document.querySelectorAll('.bricklayer').forEach(function (section) {
          bricklayers.push(new Bricklayer(section));
        });
        //console.log(bricklayers)

.my-title {
      text-transform: uppercase;
      letter-spacing: 0.2em;
    }

    .underlined {
      text-decoration: underline;
    }

    #project-card {
      display: none;
    }

    .bricklayer-column-sizer {
      width: 25%!important;
    }

    /* @media (min-width: 320px) and (max-width: 480px) {
      .bricklayer-column-sizer {
        width: 50%!important;
      }
    } */

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.3/bricklayer.css" rel="stylesheet" />

    <div id='post-project' class="container">
      <div class="my-2">
        <h4 class="text-center my-title">
          <p><a href="" id='post-link' class="underlined">posts</a> | <a href="" id='project-link'>projects</a> </p>
      </div>
      
      <!-- This bricklayer is for posts -->
      <div id="post-card" class="bricklayer">
        <div class="card bricklayer-item mb-3">
          <a href="#">
            <img src="https://i.postimg.cc/gjWk2VpS/Pay-Pal-Logo.png" class="card-img-top">
          </a>
        </div>
        <div class="card bricklayer-item mb-3">
          <a href="#">
            <img src="https://i.postimg.cc/gjWk2VpS/Pay-Pal-Logo.png" class="card-img-top">
          </a>
        </div>
      </div>
      
      <!-- this bricklayer is for projects -->
      <div id="project-card" class="bricklayer">
        <div class="card bricklayer-item mb-3">
          <a href="#">
            <img src="https://i.postimg.cc/QN4ysXq5/django-logo.jpg" class="card-img-top">
          </a>
        </div>
        <div class="card bricklayer-item mb-3">
          <a href="#">
            <img src="https://i.postimg.cc/QN4ysXq5/django-logo.jpg" class="card-img-top">
          </a>
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.3/bricklayer.js"></script>

任何解决方案吗？

Answer 1

仅查看您的代码，您的方法就非常错误。使用Bricklayer，您只需要1个父元素即可充当容器元素，并由类名bricklayer表示。

您能否再次检查是否在您的应用程序中正确安装并初始化了瓦工（因为代码段中缺少该部分）
接下来，为瓦工定义一个单个容器元素，例如<div class="bricklayer">
在您的容器（follow this example）中添加几个孩子
最后一次调用瓦工，仅一次。

例如const bricklayer = new Bricklayer(document.querySelector('.bricklayer'))

这里是a working Fiddle。有关更多详细信息，请参见official getting started guide

希望有帮助。如果您可以共享更多代码或创建小提琴，则可以对其进行修改，以使其适合您:)

Answer 2

我已通过切换到salvattore来解决此问题。但您仍然可以为以后的用户发布我的bricklayer问题的修复程序。谢谢：D

Bricklayer.js：如何在同一页面上多次使用Bricklayer？

2 个答案: