我有下一页:
$(function () {
var container = document.querySelector('#PanelContainer');
var msnry = new Masonry(container, {
itemSelector: '.selector-class',
isAnimated: true,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$(".spoiler-trigger").click(function () {
$(this).parent().next().collapse('toggle');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="container">
<div id="PanelContainer" class="row">
<div class="col-md-6 selector-class">
<div class="panel panel-primary card-0">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="btn btn-default btn-xs spoiler-trigger" data-toggle="collapse">Collapse</button>
</div>
<div class="panel-collapse collapse out">
<div class="panel-body">Body</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 selector-class">
<div class="panel panel-primary card-0">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="btn btn-default btn-xs spoiler-trigger" data-toggle="collapse">Collapse</button>
</div>
<div class="panel-collapse collapse out">
<div class="panel-body">Body</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 selector-class">
<div class="panel panel-primary card-0">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="btn btn-default btn-xs spoiler-trigger" data-toggle="collapse">Collapse</button>
</div>
<div class="panel-collapse collapse out">
<div class="panel-body">Body</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 selector-class">
<div class="panel panel-primary card-0">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="btn btn-default btn-xs spoiler-trigger" data-toggle="collapse">Collapse</button>
</div>
<div class="panel-collapse collapse out">
<div class="panel-body">Body</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
一切看起来都很完美,但是当用户尝试展开与其他面板重叠的任何面板时。如何使 Masonry 重新计算并平滑更新面板的位置?
附:我是 JS 菜鸟。
已添加
我为 Bootstrap 事件设置了监听器:
$(document).on('hidden.bs.collapse', function () {
msnry.layout();
});
$(document).on('shown.bs.collapse', function () {
msnry.layout();
});
我的布局开始更新自身,但如果它的扩展行为错误。现在,面板展开并在调用布局更新之后,但我需要在此之前进行更新。
最佳答案
希望这能有所帮助,我得到了这个工作,但仅在使用 col-XX-[3/6/12]
时(由于对 width:
的要求)是一个很好的%年龄)
有点乱,但很实用。
值得改变/注意的事情:
为了解决折叠/展开时的布局变化,JS 有一个在更新时运行的 setTimeout
;在制作中,或者特别是对于较慢的动画展开/折叠序列,我想需要找到更好的解决方案。但对于少于 100 毫秒的动画,我认为你可以这样做。
在 CSS 上,如果您使用任何大于 xs
的 Bootstrap 列,则需要调整 css grid-item[-6,-12]
以匹配 col
规则以根据屏幕尺寸更改宽度%。
大多数情况下, Bootstrap 列规则优先,因此事情不会变得太糟糕。
[注意:我的 .click 事件绑定(bind)到面板上的文本标题,而不是面板标题 div]
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,
});
$('.panel-heading').click(function () {
setTimeout(function() {
$('.grid').masonry('layout');
}, 300);
});
.grid-sizer, .grid-item {width: 25%;}
.grid-item--width-6 { width: 50%;}
.grid-item--width-12 { width: 100%;}
/* NOT required to work,it
helps demo whats going on */
.panel-body {
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<link href="css/main.css" rel="stylesheet">
<div class="grid">
<div class="grid-sizer"></div>
<div class=" col-xs-12 grid-item grid-item--width-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse0-m">panel 0</a>
</h4>
</div>
<div id="collapse0-m" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
</div>
</div>
</div>
<div class=" col-xs-6 grid-item grid-item--width-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1-m">panel 1</a>
</h4>
</div>
<div id="collapse1-m" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
</div>
</div>
</div>
<div class="col-xs-6 grid-item grid-item--width-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2-m">panel 2</a>
</h4>
</div>
<div id="collapse2-m" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
</div>
</div>
</div>
<div class="col-xs-3 grid-item">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3-m">panel 3</a>
</h4>
</div>
<div id="collapse3-m" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
</div>
</div>
</div>
<div class="col-xs-3 grid-item">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse4-m">panel 4</a>
</h4>
</div>
<div id="collapse4-m" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
</div>
</div>
</div>
<div class="col-xs-6 grid-item grid-item--width-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse5-m">panel 5</a>
</h4>
</div>
<div id="collapse5-m" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/main.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
关于javascript - 当我使用 Masonry 时,Bootstrap 折叠面板相互重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42553710/