I have a container with a bunch of items, like so:
<div class="isotope">
<div class="item"></div>
...
<div class="item"></div>
</div>
I am using Isotope v3 to apply the Packery layout and prepare for filtering, like so:
var $iso = $('.isotope').isotope({
itemSelector: '.item',
layoutMode: 'packery',
percentPosition: true,
packery: {
gutter: 0
}
});
Now, when the Packery layout is applied on load, the height of the container matches the stack of items perfectly. So far, so good.
However, when I apply one of the filters (using $iso.isotope({filter: something})), the height of the container changes in order to match the filtered stack of items. I guess that makes sense, but because the difference in height tends to be big, this can cause the page to scroll/jump to different positions, making the overal user experience rather fidgety.
I would prefer, in this case, for the container to maintain its height after the first time the Packery layout is applied (on load). I have tried several things, but to no avail. Perhaps most notably, these things did not work as I had hoped:
- Applied
resizesContainer: false(both to the Isotope initialization as to the filtering). This did not appear to do anything. - Stored the height in a variable after the Packery layout had run the first time, and then applied said height to the container through the
layoutCompleteevent handler. This does end up with the height I want, but not before changing it the way it normally does, making the page jump around twice, and thus actually making things worse.
I have found similar questions on Stack Overflow, but actually asking for the opposite (as in, how do I make the container resize), and they didn’t help me further either, so any help would be appreciated.