All items aligned to the left in one column

[JustinMoser]

Hi, I am using the masonry component, whereby i request a load (100) of random images from a service every 10 seconds or so, and then re-render my component with the new images, however fairly often when the component is re-painted, all the items are in a single column on the left, and this completely breaks the gallery.

Other times, they are all in fixed width columns, which also looks less than great:

This is how it looks when it works correctly:

As a side note, these are my masonryOptions:

        const masonryOptions = {
            transitionDuration: 0,
            itemSelector: '.grid-item',
            columnWidth: 1,
            gutter: 0,
            isOriginLeft: true
        };

However the animation still shows, and its quite an expensive operation to keep repainting, so I was hoping if it were able to fade the change in and out instead of the animation?

Thanks, Justin

[afram]

Hi @JustinMoser Apologies for the delay in getting back to you - I didn't see this issue!

is this still an issue for you? Have you tried the latest version? Do you have a running example to reproduce this? http://codesandbox.io/ maybe?

[ezekielaquino]

@afram this is happening, a known bug perhaps? Calculations seem a bit off on the x axis, if I scale child items such as the parent width is 300 pixels less wide, then it works

[ezekielaquino]

Solution is to make sure to define a columnWidth in the options!

[Janoyan]

const masonryOptions = {
    transitionDuration: 0,
    columnWidth: 1
};

works for me