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

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



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



问题在于，随着砌筑元素的放置，同位素元素周围的<ul>不会调整大小。这意味着，<ul>之后的任何元素都不会被压低，位于砌筑画廊下方，并且画廊元素与其他东西重叠在它下面。

可以通过为页脚（目前只是一个愚蠢的HTML元素）提供一些jQuery魔术来解决此问题，但我想避免这种情况。

有没有一种方法可以快速获取同位素砌体画廊的高度并将其应用于周围的<ul>元素，以使布局按预期工作？

最佳答案

同位素会自动为我们调整容器的大小，如下面的简单示例所示。 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>

关于javascript - 如何使同位素画廊拉伸(stretch)周围的容器？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47085050/