时间戳

首页 > 解决方案 > Bricklayer.js：如何在同一页面上多次使用 Bricklayer？

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

问题描述

更新 我已将@Alice answser 添加到此代码片段中，以说明我使用砌砖工的原因和目的。Bricklayer 只修改了第一个briklayer，但完全忽略了第二个，我可以理解，因为我使用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>

任何解决方案？

标签： javascripthtmllayoutgrid

解决方案

只需查看您的代码，您的方法就有点错误。使用砌砖工，您只需要 1 个作为容器元素的父级，并由 classname 表示bricklayer。

  • 您能否仔细检查一下您的应用程序中是否正确安装并初始化了砌砖工（因为您的代码片段中缺少该部分）
  • 接下来，为砌砖工定义一个容器元素，例如<div class="bricklayer">
  • 将几个孩子添加到您的容器中（按照此示例）

  • 最后打电话给瓦工，只有一次。

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

这是一个工作小提琴。更多详细信息，请参阅官方入门指南

希望有帮助。如果您可以分享更多代码或创建 Fiddle，我可以对其进行修改以使其为您工作:)

推荐阅读