Изотопная фильтрация при сохранении высоты карты

Question

Я пытаюсь создать макет, который можно отфильтровать, используя изотоп или какой-либо подобный плагин, но я также хочу иметь возможность использовать колоды карт Bootstrap , чтобы каждый карта имеет одинаковую высоту. Я был бы открыт для чего-то другого, если бы каждая карта и ее разделы были одинакового размера.

Вот ручка: https://codepen.io/anon/pen/GPLqZm

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card-deck p-0" id="isotope">
        <div class="card col-3 p-0 a b">
          <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <div class="card col-3 p-0 a c">
          <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <div class="card col-3 p-0 b c">
          <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <div class="card col-3 p-0 b d">
          <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

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

Используйте этот пользовательский эквалайзер для решения вашей проблемы.

Codepen, используя ваш пример: https://codepen.io/brooksrelyt/pen/LMvXox

JS:

$(window).load(function() {
    equalheight('.card');
});

equalheight = function(container){

    var currentTallest = 0,
    currentRowStart = 0,
    rowDivs = new Array(),
    $el,
    topPosition = 0;
    $(container).each(function() {

        $el = $(this);
        $($el).height('auto')
        topPostion = $el.position().top;

        if (currentRowStart != topPostion) {
            for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
                rowDivs[currentDiv].height(currentTallest);
            }
        rowDivs.length = 0; // empty the array
        currentRowStart = topPostion;
        currentTallest = $el.height();
        rowDivs.push($el);
        } else {
            rowDivs.push($el);
            currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
        }
        for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
            rowDivs[currentDiv].height(currentTallest);
        }
    });
}

$(window).resize(function(){
    equalheight('.card');
});