如何解决第一次未折叠时，折叠的自举砌体面板会随机移动
嗨，我正在尝试使用 Bootstrap 5 和 Masonry (https://masonry.desandro.com/) 在折叠的 div 中使用 Pinterest 风格的图像淋浴。 这是我尝试做的：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="collapse" data-bs-target="#My-collapse">Button
</button>
<div id="My-collapse" class="collapse">
<div class="mt-3"></div>
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-sm-4 col-md-3 py-3">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3 py-3">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3 py-3">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3 py-3">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3 py-3">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" crossorigin="anonymous"></script>
</body>
</html>如您所见，所有图像都堆叠在一起，而让它们移开的唯一方法是更改屏幕尺寸。因此，我决定尝试使用脚本更新布局：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="collapse" data-bs-target="#My-collapse">Button
</button>
<div id="My-collapse" class="collapse">
<div class="mt-3"></div>
<div class="row" id="mason">
<div class="col-sm-4 col-md-3 py-3 mason-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3 py-3 mason-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3 py-3 mason-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3 py-3 mason-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3 py-3 mason-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" crossorigin="anonymous"></script>
<script>
const msnry = new Masonry('#mason',{
"percentPosition": true,"itemSelector": '.mason-item'
});
const Col = document.getElementById('My-collapse');
Col.addEventListener('shown.bs.collapse',function() {
msnry.layout();
});
</script>
</body>
</html>然而，这仍然不完美，因为图像都从一个点离开并向外传播。我希望他们从一开始就处于正确的位置。 有人可以帮我解决这个问题，或者建议一个可以与 Bootstrap 一起使用的不同 Pinterest 样式布局库吗？
解决方法
我找到了解决我的问题的方法，它涉及在折叠的 div 的高度是最终高度时初始化砖石。我们可以等待过渡完成，但这意味着砖石只会在动画期间弹出，因此您需要在第一次显示倒塌时执行此操作。因此，我们必须添加 show 类，该引导程序使用该类设置高度，然后触发浏览器回流 (Force browser to trigger reflow while changing CSS)，初始化砌体，最后移除该类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="collapse" data-bs-target="#My-collapse">Button
</button>
<div id="My-collapse" class="collapse">
<div class="mt-3"></div>
<div class="row" id="mason">
<div class="col-sm-4 col-md-3 py-3 mason-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3 py-3 mason-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3 py-3 mason-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3 py-3 mason-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3 py-3 mason-item">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Img">
<div class="card-body">
<h5 class="card-title">This is an image</h5>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" crossorigin="anonymous"></script>
<script>
const msnry = new Masonry('#mason',{
"percentPosition": true,"itemSelector": '.mason-item',"initLayout": false
});
const Col = document.getElementById('My-collapse');
let firstTime = true;
Col.addEventListener('shown.bs.collapse',function() {
if (firstTime)
{
firstTime = false;
Col.classList.add('show');
void(Col.offsetHeight);
msnry.layout();
Col.classList.remove('show');
}
});
</script>
</body>
</html>（使用堆栈溢出嵌入时似乎不太好用，但在普通页面上效果很好）
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
