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

Question

我有一个 Isotope 砖石画廊。完全是运行-of-the-mill，没什么特别的：

现在在内部，Isotope 使用 position: absolute 将元素定位在图库中（就像其他所有砖石库一样）：

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

这可以通过给页脚（现在只是一个愚蠢的 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>

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

How to make an Isotope gallery stretch the surrounding container?

javascript

jquery

html

css

jquery-isotope