在保持卡片高度的同时进行同位素过滤

Question

我正在尝试创建一个可以使用 isotope or some similar plugin, but I also want to be able to use Bootstrap's card-decks 进行过滤的布局，以确保每张卡片都具有相同的高度。如果每张卡片及其部分大小相同，我会接受不同的东西。

这是一支笔：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');
});

在保持卡片高度的同时进行同位素过滤

Isotope filtering while maintaining card height

twitter-bootstrap

bootstrap-4

filtering

jquery-isotope