如何使同位素畫廊伸展周圍的容器？

Question

我有一個同位素砌體畫廊。 它完全是普通的，沒什么特別的：

現在在內部，Isotope會使用position: absolute （例如，可能在那里的所有其他砌體庫）在畫廊中position: absolute元素：

問題在於，隨着石工元素的放置，圍繞同位素元素的<ul> 不會調整大小。這意味着，在<ul>之后的任何元素都不會被壓低，位於石工畫廊下方，並且畫廊元素與材料重疊在它下面。

可以通過為頁腳（現在只是一個愚蠢的HTML元素）提供一些jQuery魔術來解決此問題，但我想避免這種情況。

有沒有一種方法可以快速獲取同位素砌體畫廊的高度並將其應用於周圍的<ul>元素，以使布局按預期工作？

Answer 1

同位素會自動為我們調整容器的大小，如下面的簡單示例所示。 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>