desandro
commented
5 years ago Thanks for reporting this issue. Yes, it's possible. It would require checking the pckry.items positioning against the viewport coordinates. Likely with IntersectionObserver. But I do not have a ready-made solution for this kind of behavior.
How is it possible to achieve a DOM recycling like it is described here with packery? Especially with more than one image column. https://developers.google.com/web/updates/2016/07/infinite-scroller
Packery doesn't work the same way in both directions. The layout is calculated in one direction. And normally from top to bottom. This means that you can add any new items to the bottom, which are then simply placed at the bottom. But if you turn the (scroll-)direction around and add items above the viewport, the layout will be recalculated (from top to bottom) and all items will be rearranged, i.e. everything will move. If you could change the direction of the layout calculation from bottom to top in the moment when the scrolling direction is reversed and the items have to stay fixed in the viewport, the problem would be solved. Which, as far as I can see, doesn't work.
What possibilities are there to remove images below and above the viewport or to recycle the DOM, so that you can achieve a performance gain and only the images are stored (images in the scope of the viewport, once above and once below) that you do not unnecessarily overload the browser, especially with a large number of images in a very long list.
@desandro