引导卡柱砌体效果 - 改变高度卡是跳跃的答案

【问题标题】：Bootstrap card columns masonry effect - change height cards are jumpy引导卡柱砌体效果 - 改变高度卡是跳跃的
【发布时间】：2022-02-11 00:42:21
【问题描述】：

我使用引导卡柱砌体。如果用户点击按钮（在卡片内），卡片的高度会改变（我动态添加卡片页脚）。

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

我设置了这个 jsfiddle。只需点击第一张卡片选择按钮，您就会看到其中的卡片会跳到右边。 （可能会更改窗口大小，直到您有 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>

【问题讨论】：

我增加了窗口大小并测试了 4 列。我没有看到任何“跳跃”
抱歉...链接错误：jsfiddle.net/rvt8a690/2
您可以动态更改提交按钮，而不是添加页脚。
因为用户可以多次单击选择按钮（它计算选择），所以它不能是撤消按钮。如果我的问题没有解决方案，那么我可以默认显示撤消按钮。
@egolive，我还有一个建议，我们在选择按钮的右侧有空白区域。我们可以把撤销按钮放在那里。

标签： javascript jquery html css bootstrap-4

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

我已经有这个问题好几天了。我一直不得不改变事物的显示或弹出方式。我相信我已经找到了解决这个问题的方法。

在card-columns样式中，有一个属性叫orphans，值为1。我把它改写为orphans:unset;

这样，当卡片的高度发生变化时，卡片不会尝试重新排列。

ug9mLytojsFiddle

【讨论】：