如何使同位素画廊拉伸周围的容器？

Question

我有一个Isotope砌体画廊。它完全是普通的，没什么特别的：

现在在内部，Isotope使用position: absolute将元素放置在图库中（就像那里的所有其他砌体库一样）：

问题是围绕Isotope元素的<ul>没有调整，因为砌体元素被定位这意味着在<ul>之后的任何元素都不会被推下，在砌体画廊下面，并且画廊元素与它下面的东西重叠。

这可以通过给页脚（现在只是一个愚蠢的HTML元素）一些jQuery魔法来修复，但我想避免这种情况。

有没有办法快速获得Isotope砌体画廊的高度并将其应用于周围的<ul>元素，以使布局按预期工作？

Answer 1

Isotope会自动为我们调整容器大小，如下面的简单示例所示。 CSS规则似乎可能会干扰库的样式或高度计算。在初始化网格之前尚未加载的图像也可能会甩掉高度。

for (var i = 1; i <= 15; i++) {
    $('#grid').append($('<li class="item">').addClass('item' + i % 2));
}

var $grid = $('#grid').isotope({ itemSelector: '.item', layoutMode: 'masonry' });

setInterval(function () {
    if (i++ % 3 == 0) { 
        $grid.isotope({ filter: '*' });
    } else {
        $grid.isotope({ filter: '.item' + i % 2 });
    }
}, 1000);

#grid { border: 1px solid black; padding: 5px; }
.item { margin: 5px; padding: 5px; border: 1px dashed grey; list-style-type: none; }
.item0 { width: 50px; height: 30px; }
.item1 { width: 50px; height: 50px; }

<ul id="grid"></ul>
<p>Element below</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>