Algolia - Reload Masonry.JS

Hi Guys,

I want my search results arrange with Masonry.js. That works perfect at the first load (window.onload).

As soon I search something in my Algolia search. I have to reload my masonry container.

But it does not work.

window.onload = function () {
$('.masonry').masonry({
    itemSelector: '.masonry-item',
    columnWidth: 330,
    fitWidth: true,
    gutter: 20
});}

And the reload event from algolia (Does not work)

function onRenderHandler() {
    $('.masonry').masonry({
        itemSelector: '.masonry-item',
        columnWidth: 330,
        fitWidth: true,
        gutter: 20
    });
    alert('test');} 

search.on('render', onRenderHandler);

I work with https://masonry.desandro.com/

I hope you can help me.

I have solved the problem. But now a new one appears. I can not exexcute masonry until all elements have been loaded.

How can I execute my function when all elements have finished loading?

My solution for the masonry problem:

function loadmasonry() {
var $grid = $('.masonry').masonry({
    itemSelector: '.masonry-item',
    columnWidth: 330,
    fitWidth: true,
    gutter: 20
});

$grid.masonry('reloadItems');
$grid.masonry('layout');}