Bricklayer.js: как использовать Bricklayer несколько раз на одной странице? - PullRequest
Новая
       31

Bricklayer.js: как использовать Bricklayer несколько раз на одной странице?

0 голосов
/ 13 мая 2019

UPDATE Я добавил ответчик @Alice к этому фрагменту кода, чтобы проиллюстрировать, почему и для чего я использую каменщик. Каменщик только модифицирует первый briklayer, но полностью игнорирует второй, я могу понять, что, поскольку я использую querySelector.

Но даже после добавления ответа @ Алисы результат остается прежним. Я попробовал 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>

Любое решение?

Ответы [ 2 ]

0 голосов
/ 14 мая 2019

Я исправил эту проблему, переключившись на salvattore.но вы все еще можете опубликовать исправление моей проблемы bricklayer для будущих пользователей.Спасибо: D

0 голосов
/ 13 мая 2019

Просто просматриваете ваш код, и ваш подход немного ошибочен.С каменщиком вам нужен только один родительский элемент, который действует как элемент контейнера и обозначается именем класса bricklayer.

  • Можете ли вы дважды проверить, правильно ли установлен и инициализирован каменщик в вашем приложении (так какэта часть отсутствует в вашем фрагменте кода)
  • Затем определите один элемент контейнера для каменщика, например, <div class="bricklayer">
  • Добавьте пару дочерних элементов в ваш контейнер ( следуйте этому примеру )

  • Наконец вызовите каменщика, только один раз .

    например const bricklayer = new Bricklayer(document.querySelector('.bricklayer'))

Вот рабочая скрипка .Подробнее см. В официальном руководстве по началу работы

Надеюсь, что это поможет.Если вы можете поделиться немного больше своего кода или создать скрипку, я могу изменить его, чтобы он работал на вас :)

...