jquery - jquery isotope resize 以处理扩展的手风琴

Question

我将 jquery isotope 用于联邦监管活动的可排序文本列表。我们在一个案卷中列出每个更新，每个案卷的列表可能会变得很长。我已将 Bootstrap 简单手风琴面板添加到具有两个以上更新的项目中，以使每个项目面板的高度相当一致。当我打开手风琴面板时，同位素面板不会调整大小以适应展开的手风琴。

关于如何让同位素面板调整高度以处理展开的手风琴的任何想法？

谢谢！

Answer 1

要修复它，您需要在所有项目都具有适当的大小后进行初始化或布局。只需添加以下代码：

$('.panel').on('shown.bs.collapse', function (e) {
    $grid.isotope('layout');
})

Answer 2

您必须在回调中为同位素“reLayout”添加一个函数。

function() {$('#container').isotope('reLayout');}

放置位置的示例：

$(this).next().slideDown(
    function() {$container.isotope('reLayout');}
);

Answer 3

同位素中有一个用于简单列表布局的选项。

脚本：

$('.container').isotope({layoutMode: 'straightDown'})

在为您的 css 添加修复以覆盖插件执行中的动态内联样式之后：

.isotope .isotope-item {
    min-height: 0px !important;
    position: static !important;
    transform: translate3d(0px, 0px, 0px) !important;
}
.isotope-hidden{
    display: none;
}

我希望这对你有帮助。