Эффект каменной кладки в колонках Bootstrap - карты с изменяемой высотой являются скачкообразными

Question

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

Проблема в том, что в специальных созвездиях карты меняют положение, и это выглядит как-то "нервно".

Я настроил этот jsfiddle. Просто нажмите на кнопку выбора первой карты, и вы увидите, что карта среди них прыгнет вправо. (возможно, меняйте размер окна, пока у вас не будет 4 карты рядом)

https://jsfiddle.net/rvt8a690/2/

РЕДАКТИРОВАТЬ: Может быть, вам придется немного поиграть с размером экрана, если вы не можете воссоздать ошибку. Но я сделал этот маленький подарок, где вы можете увидеть ошибку:

$('.ccs-product-counter').on('click', function(e) {

  let selectedProductID = $(this).find('span.badge').attr("data-product-id");

  if (!$('#undo-p-id-' + selectedProductID).hasClass("UndoIsVisible")) {
    $('#undo-p-id-' + selectedProductID).removeClass('d-none');
    $('#undo-p-id-' + selectedProductID).addClass('fadeInDown');
    $('#undo-p-id-' + selectedProductID).addClass('UndoIsVisible');
    $('#card-p-id-' + selectedProductID).addClass('animationIsRunning');
    setTimeout(function() {
      $('#undo-p-id-' + selectedProductID).removeClass('fadeInDown');
      $('#card-p-id-' + selectedProductID).removeClass('animationIsRunning');
    }, 800);
  }

});

@media (min-width: 34em) {
  .card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

@media (min-width: 48em) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

@media (min-width: 62em) {
  .card-columns {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}

@media (min-width: 75em) {
  .card-columns {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container mt-3 mb-5">
  <div class="card-columns transaction">
    <div id="card-p-id-1" class="card product-card">
      <img class="card-img-top noselect" src="https://via.placeholder.com/120" />
      <div class="card-body">
        <h5 class="card-title mb-0">Title</h5>
        <p class="card-text mt-0">
          <i class="f-14">
                    Subtitle
                  </i>
        </p>
        <p class="card-text">
          Lorem ipsum dolor sit amet
        </p>
        <p>
          <strong>Price: 2$</strong>
          <br/>
          <strong>Stock: 5</strong>
        </p>
        <button type="button" class="btn btn-primary d-block center-margin-0-auto ccs-product-counter">Select <span id="add-p-id-1" class="badge badge-light" data-product-id="1">0</span>
              </button>
      </div>
      <div id="undo-p-id-1" class="card-footer text-muted text-center ccs-undo-selection animated d-none noselect">
        <div class="ccs-undo-selection-inner noselect">
          <i class="fas fa-eraser"></i> Undo selection
        </div>
      </div>
    </div>
    <div id="card-p-id-2" class="card product-card">
      <img class="card-img-top noselect" src="https://via.placeholder.com/150" />
      <div class="card-body">
        <h5 class="card-title mb-0">Title</h5>
        <p class="card-text mt-0">
          <i class="f-14">
                      Subtitle
                  </i>
        </p>
        <p class="card-text">
          Descrconsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l
        </p>
        <p>
          <strong>Price: 2$</strong>
          <br/>
          <strong>Stock: 5</strong>
        </p>
        <button type="button" class="btn btn-primary d-block center-margin-0-auto ccs-product-counter">Select <span id="add-p-id-2" class="badge badge-light" data-product-id="2">0</span>
              </button>
      </div>
      <div id="undo-p-id-2" class="card-footer text-muted text-center ccs-undo-selection animated d-none noselect">
        <div class="ccs-undo-selection-inner noselect">
          <i class="fas fa-eraser"></i> Undo selection
        </div>
      </div>
    </div>
    <div id="card-p-id-3" class="card product-card">
      <img class="card-img-top noselect" src="https://via.placeholder.com/100" />
      <div class="card-body">
        <h5 class="card-title mb-0">Title</h5>
        <p class="card-text mt-0">
          <i class="f-14">
                      Subtitle
                  </i>
        </p>
        <p class="card-text">
          Descr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eiption
        </p>
        <p>
          <strong>Price: 2$</strong>
          <br/>
          <strong>Stock: 5</strong>
        </p>
        <button type="button" class="btn btn-primary d-block center-margin-0-auto ccs-product-counter">Select <span id="add-p-id-3" class="badge badge-light" data-product-id="3">0</span>
              </button>
      </div>
      <div id="undo-p-id-3" class="card-footer text-muted text-center ccs-undo-selection animated d-none noselect">
        <div class="ccs-undo-selection-inner noselect">
          <i class="fas fa-eraser"></i> Undo selection
        </div>
      </div>
    </div>
    <div id="card-p-id-4" class="card product-card">
      <img class="card-img-top noselect" src="https://via.placeholder.com/180" />
      <div class="card-body">
        <h5 class="card-title mb-0">Title</h5>
        <p class="card-text mt-0">
          <i class="f-14">
                      Subtitle
                  </i>
        </p>
        <p class="card-text">
          Lorem ipsum consetetur sadipscing elitr, sed diam nonumy e
        </p>
        <p>
          <strong>Price: 2$</strong>
          <br/>
          <strong>Stock: 5</strong>
        </p>
        <button type="button" class="btn btn-primary d-block center-margin-0-auto ccs-product-counter">Select <span id="add-p-id-4" class="badge badge-light" data-product-id="4">0</span>
              </button>
      </div>
      <div id="undo-p-id-4" class="card-footer text-muted text-center ccs-undo-selection animated d-none noselect">
        <div class="ccs-undo-selection-inner noselect">
          <i class="fas fa-eraser"></i> Undo selection
        </div>
      </div>
    </div>
    <div id="card-p-id-5" class="card product-card">
      <img class="card-img-top noselect" src="https://via.placeholder.com/110" />
      <div class="card-body">
        <h5 class="card-title mb-0">Title</h5>
        <p class="card-text mt-0">
          <i class="f-14">
                      Subtitle
                  </i>
        </p>
        <p class="card-text">
          voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        </p>
        <p>
          <strong>Price: 2$</strong>
          <br/>
          <strong>Stock: 5</strong>
        </p>
        <button type="button" class="btn btn-primary d-block center-margin-0-auto ccs-product-counter">Select <span id="add-p-id-5" class="badge badge-light" data-product-id="5">0</span>
              </button>
      </div>
      <div id="undo-p-id-5" class="card-footer text-muted text-center ccs-undo-selection animated d-none noselect">
        <div class="ccs-undo-selection-inner noselect">
          <i class="fas fa-eraser"></i> Undo selection
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Ваша проблема возникает из-за того, что вы добавляете кнопку undo внизу вашей карты, и это нарушит макет card columns, который будет переставлен. Чтобы избежать этой проблемы, установите статическую кнопку отмены внизу ваших карточек и отключайте ее, пока пользователь не нажмет кнопку выбора. С этим исправлением вы будете уверены, что высота карточек всегда одинакова и макет не изменится.

Answer 2

Вам следует попробовать это решение, здесь вы можете динамически отображать и скрывать кнопки.

<button type="button" class="btn btn-primary center-margin-0-auto ccs-product-counter">Select <span id="add-p-id-1" class="badge badge-light" data-product-id="1">0</span></button> 

<button type="button" class="btn btn-secondary" style="float:right">Undo</button>