Empty columns

[a1tem]

Hi, do you know why this can happen?

I use it with infinity loader at the beginning all goes well, and then at some time all the tiles go in the incorrect order.

[shershen08]

It is really hard to say what's happening without seeing the code on the page ( do you think it would be possible to have a demo page reproducing the issue ?

[HyperC]

@shershen08 I'm also encountering this issue. It's fairly easy to reproduce. For example:

<div
          v-masonry
          :percentPosition="true"
          :gutter="4"
          origin-top="true"
          class="cards-container"
          column-width=".tile"
          horizontal-order="true"
          origin-left="false"
          transition-duration="0"
          fit-width="true"
          item-selector=".tile">
          <div
            v-masonry-tile class="tile"
            v-for="tile in new Array(100)"
            :style="{height: Math.floor(((Math.random() * 10) * 50) + 1) + 'px'}"/>
        </div>

.tile {
    background-color: green;
    width: 50px;
    margin-bottom: 10px;
}

Will render something like this (screenshot shows the bottom of the page):

..while you expect it to try and fit every column as best possible.

Example when changing the .tile width to 50%:

[pixelomo]

Try origin-left="true"

[scheinercc]

@a1tem did pixelomo's suggestion fix it for you?