javascriptjquerypackerygridstack

dynamic resizing effect in Metafizzy Packery component

I'm looking to JavaScript Packery component. I want to switch the current implementation from GridStack to Packery. One thing that stops me right now is a lack of dynamic resizing effect of components(panels) in Packery. Right now I'm unable to find this feature in demo or documentation.

Is any way to implement/enable this feature in Packery?

Solution

  • This can certainly be done. Use the "Responsive Layouts" set-up as your model: https://packery.metafizzy.co/layout.html#responsive-layouts

    Critically, you should also use Metafizzy's own imagesLoaded js to load the javascript after the images are fully loaded: https://imagesloaded.desandro.com

    The full javascript call (packery inside of imagesLoaded) should look like this:

    <script type='text/javascript'>
    $('.grid').imagesLoaded( function(){
        $('.grid').packery({
            itemSelector:'.grid-item',
            percentPosition:true, // *critical for responsive layout*
            // your own further options
        });
    });
</script>

    If you are still having trouble, try reversing the js call so that imagesLoaded is called after every image is loaded, as recommended on the Packery webpage: https://packery.metafizzy.co/layout.html#imagesloaded

    Good Luck!