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

问：

我有一个同位素砌体画廊。这完全是普通的，没什么特别的：

现在在内部，Isotope 使用（可能就像其他所有砌体库一样）将元素放置在画廊内：position: absolute

问题在于，当砌体元素被定位时，周围的同位素元素不会调整大小，这意味着任何出现在砌体图库之后的图元都不会被推下，在砌体图库下方，并且图库图元与其下方的图元重叠。<ul><ul>

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

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

javascript jquery html css jquery-isotope

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>

上一个：用填充物“突破”DIV？

下一个：为什么这个 RewriteRule 会改变QUERY_STRING，而REQUEST_URI保持不变？

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

How to make an Isotope gallery stretch the surrounding container?

评论