与同位素滤光片冲突的自举元件“塌陷”

Question

我有一个网站页面，在那里我使用引导的布局，网格和同位素，因为我需要过滤我的内容(按年，等等)。

我使用引导程序的“折叠”组件，当我仍然没有点击任何用同位素过滤内容的按钮时，我可以正确地看到隐藏在折叠中的信息，而不是出现的信息(请参阅图像1图像1-它可以、图像2图像2-它可以、图像3图像3-它可以和图像4image4 -单击以应用过滤器)，当信息出现时，上面的内容会改变(在高度上)它应该做的位置。

但是，当我单击按钮和同位素筛选网格更改的内容时--高度上的布局不受尊重(请参见图5图5-应用过滤器后的布局网格) --当我单击以引导方式查看折叠组件隐藏的内容时，内容重叠(请参见图6图6-内容重叠)。

我已经在这里搜索了堆栈溢出、github和网站，特别是尝试了mansory列( https://isotope.metafizzy.co/v1/custom-layout-modes/masonry-column-shift.html )，但是它并不像预期的那样工作。

如果有人能帮我，我将非常感激。

这里我有一个简单的代码来说明这个问题:codepen.io/sofiarf//VJRrRb

Answer 1

您需要在任何DOM更改后更新同位素布局。

由于您正在使用Bootstrap 4来处理内容的崩溃，同位素不知道这些更改。因此，在所有这些更改之后，您需要调用同位素布局函数。

引导4在隐藏和显示内容后触发事件。向这些事件添加侦听器可以解决以下问题：

$('.collapse').on('shown.bs.collapse hidden.bs.collapse', function(){
   $('.grid').isotope('layout');
});

我已经用答案更新了你的CodePen。

​

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 100
  }
});

var $collapse = $('.collapse');
var $container = $('#container');

$(".filter-colunaesquerda").click(function(e) {
  e.preventDefault();
  $grid.isotope({
    filter: '.colunaesquerda'
  });
});

$(".filter-colunadireita").click(function(e) {
  e.preventDefault();
  $grid.isotope({
    filter: '.colunadireita'
  });
});

$(".filter-all").click(function(e) {
  e.preventDefault();
  $grid.isotope({
    filter: '*'
  });
});

$collapse.on('shown.bs.collapse hidden.bs.collapse', function() {
  $grid.isotope('layout');
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<div class="container">

  <a href="" class="m-5 filter-colunaesquerda">Coluna esquerda</a>
  <a href="" class="m-5 filter-colunadireita">Coluna direita</a>
  <a href="" class="m-5 filter-all">Todos</a>

  <div class="row">
    <div class="col-6 mb-5">


      <div class="grid">
        <div class="grid-item colunaesquerda">
          <div class="collapse" id="collapseExample1">
            <div class="card card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
          </div>
          <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum quas, tempore alias libero minima inventore esse quam aperiam autem molestiae dolores quaerat delectus at ducimus dolorum provident quis porro placeat? </p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button></div>
      </div>
    </div>
    <div class="col-6 mb-5">


      <div class="grid">
        <div class="grid-item colunadireita">
          <div class="collapse" id="collapseExample2">
            <div class="card card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
          </div>
          <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum quas, tempore alias libero minima inventore esse quam aperiam autem molestiae dolores quaerat delectus at ducimus dolorum provident quis porro placeat? </p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button></div>
      </div>
    </div>


    <div class="col-6 mb-5">


      <div class="grid">
        <div class="grid-item colunaesquerda">
          <div class="collapse" id="collapseExample3">
            <div class="card card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
          </div>
          <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum quas, tempore alias libero minima inventore esse quam aperiam autem molestiae dolores quaerat delectus at ducimus dolorum provident quis porro placeat? </p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button></div>
      </div>
    </div>
    <div class="col-6 mb-5">


      <div class="grid">
        <div class="grid-item colunadireita">
          <div class="collapse" id="collapseExample4">
            <div class="card card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
          </div>
          <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum quas, tempore alias libero minima inventore esse quam aperiam autem molestiae dolores quaerat delectus at ducimus dolorum provident quis porro placeat? </p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample4" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button></div>
      </div>
    </div>


  </div>
</div>





<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>



<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

​