javascript - 如何使同位素画廊拉伸(stretch)周围的容器？

Question

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

现在在内部，Isotope 使用 position: absolute 将元素定位在图库中(可能就像其他所有砖石图书馆一样):

问题是 <ul>围绕同位素元素的大小不会随着砌体元素的定位而调整这意味着在<ul>之后的任何元素不要被推到砌体画廊下方，并且画廊元素与其下方的东西重叠。

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

有没有办法快速获取Isotope masonry gallery的高度并将其应用到周围<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>