引导卡列砌石效果-更改高度卡跳动

Question

我使用引导卡列砌体。如果用户单击按钮（位于卡片内部） ，则卡片的高度会更改（我会动态添加卡片页脚）。

问题是，在特殊的星座中，卡片会改变位置，看上去有点“跳跃”。

我设置了这个jsfiddle。只需单击firsts卡选择按钮，您将看到其中的卡会跳到右侧。 （也许更改窗口大小，直到彼此相邻有4张卡）

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

编辑：如果您无法重新创建该错误，也许您必须稍微调整一下屏幕尺寸。但是我制作了这个小gif，可以在其中看到错误：

$('.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

您应该尝试此解决方案，在这里您可以动态显示和隐藏按钮。

<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>

Answer 2

您的问题会发生，因为您要在卡的底部添加undo按钮，这会破坏card columns布局，该布局将被重新排列。为避免此问题，请在卡的底部设置一个静态撤消按钮，并将其禁用，直到用户单击选择按钮。借助此污垢修复程序，您将确保卡的高度始终相同并且布局不会改变。