How to call vanilla JS resize

[desandro]

From @Postnov https://github.com/desandro/masonry/issues/1042#issuecomment-385229201

---

I am sorry for maybe stupid question and written not where it should be, but how to call a method masonry layout after change css of the block from 'display: none' to 'display: block' in native js? I have a problems work with content of tabs.

Code example is simplified.

.grid {
   display: none;
}

elem.addEventListener('click', function() {
   grid.style.display = 'block';
   //here method masonry for layout
})

Almost like this, just on native javascript

$grid.on( 'load', function() {
  $grid.masonry('layout');
});

Thanks and sorry for my english, i am just begin.

[desandro]

If you have initialized Masonry with HTML, I recommend changing to initialize with vanilla JS. Be sure to remove data-masonry attribute from HTML. Then you'll have access to the Masonry instance so you can call methods.

var msnry = new Masonry( '.grid', {
  // options..
}):

// trigger masonry method
elem.addEventListener('click', function() {
   grid.style.display = 'block';
   msnry.layout();
});

[Postnov]

Thank you, David!

[chasebank]

@desandro what if I initialized Masonry in one place, and don't have access to that variable from where I'm trying to trigger the layout change?

[desandro]

@chasebank You access the Masonry instance via the element with Masonry.data

[hn1]

Hi We would like to purchase a licence if we can get masonry to work with lazy loading. We are using the lozad script and here is the code, but it does not work. Any assistance would be appreciated.

function InitMasonry() {
            observer.observe();
            var $grid = $('#resultset').masonry({
                // options
                itemSelector: '.postItem',
                columnWidth: 250,
                fitWidth: true,
                stagger: 30
            });

            $grid.on('load', function () {
                $grid.masonry('layout');
            });

            $grid.imagesLoaded(/*function () { $grid.removeClass('opacity0'); }*/).progress(function () {
                $grid.masonry('layout');
            });

        }