ideal way to set the column count?

[H4xX0r1337]

I currently do this to make the grid have N columns at a time. It seems pretty hacky, and doesnt update once columnCount updates. Is there a better way? Percentages don't seem to work even with percentage on true. This is on version 4.2.0

    <MasonryInfiniteGrid
        class="grid"
        gap={0}
        items={posts}
        on:requestAppend={({ detail: e }) => {
            const nextGroupKey = (+e.groupKey || 0) + 1;
            loadPosts(nextGroupKey);
        }}
        autoResize={true}
        useResizeObserver={true}
        percentage={true}
        useTransform={true}
        let:visibleItems
    >
        {#each visibleItems as item (item.key)}
            <div class="item">
                <div style="width: {Math.floor(width / columnCount)}px">
                                    whatever here
                                </div>
            </div>
        {/each}
    </MasonryInfiniteGrid>
</div>```

[daybrush]

@H4xX0r1337

I'll check it out.

[daybrush]

@H4xX0r1337

Oh, I checked the source code. useResizeObserver checks the size of the container. Therefore, the size of the item is not detected. However, there is a plan to detect the size of the item in the future.

In this case, get an instance(bind:this={ig}) and call ig.renderItems({ useResize: true }).

[H4xX0r1337]

@daybrush That works well, thank you! The performance however is pretty bad if I have many elements loaded. I assume it's because all divs get their own style and width. Is there a more performant solution available to make N equally wide columns?

[H4xX0r1337]

ideally, i'd want to set the column cont via css and media queries so it's responsive.

[daybrush]

@H4xX0r1337

There is an option called isEqualSize. Only one element is checked and all are judged to be the same size.

isEqualSize={true}

[H4xX0r1337]

@daybrush that doesn't work because the elements only have the same width, not height.

[daybrush]

@H4xX0r1337

If only the width is the same, the performance cannot be improved. If the size of the element does not change, use isConstantSize={true}.

If you are worried about having a lot of items, think about groups. Only the groups shown on the screen will be shown.

If you want to change columnCount directly regardless of size, you can set columnCount={4}.

[H4xX0r1337]

@daybrush okay, so it seems like i am stuck with what i am doing currently. Is there a way to render more items than what is really visible? images seem to pop up because they dont get a chance to load bfore on screen.

[daybrush]

@H4xX0r1337

1. Set the threshold high if you want to loosen the condition a bit.
2. To make the desired group visible, set useRecycle to false and use the setCursors method. https://naver.github.io/egjs-infinitegrid/docs/api/MasonryInfiniteGrid/#setCursors

[H4xX0r1337]

@daybrush thanks! setting the treshold higher really improved it a lot!