Images are overlapped.

[manimuthukumar6]

Hi ,

I don't know the heights of my items ahead of time and try to use the measureItems higher-order component to measure them in the browser before layout using the following snippet.

import { SpringGrid, measureItems } from 'react-stonecutter';

const Grid = measureItems(SpringGrid);
<Grid
component="ul"
columns={3}
columnWidth={350}
gutterWidth={3}
gutterHeight={3}
layout={layout.pinterest}

IMG A

IMG B

IMG C

IMG D

But I am getting all images are overlapped with the single image. Any idea about this issue. I want to implement "Pinterest grid layout".

[Dan Train]

Hi there,

This is probably because measureItems measures the element heights immediately when the images have not yet loaded. The solution might be to wait for the images to fully load before measuring them and adding them to the grid.

measureItems could be modified to use a library such as imagesLoaded to achieve this. I might take a look at this in future.

The easiest is not to use measureItems at all, maybe there's a way for you to know the image dimensions ahead of time and set the itemHeight props explicitly?

[manimuthukumar6]

Hi ,

Currently, I am not sure about to the exact image height. It's dynamically loaded. I want to be implement like as Pinterest using react and jsx components.

Do you have any idea to combine imagesLoaded and react-stonecutter component using Vanilla JavaScript ?

I mean using " imagesLoaded( elem, options, callback ) " , is it possible to call the react-stonecutter component using callback ?

Thanks,
Mani

[Dan Train]

Hi Mani,

I've updated measureItems so now you can pass an option to measure the images, something like this:

const Grid = measureItems(SpringGrid, { measureImages: true })

Could you give it a try?

[Shardendu Kumar Gautam]

Hey @dantrain, I tried using the measureImages option in measureItems but still it is not able to calculate the proper height of the item. My item contains image and a title, both with dynamic heights. Any solutions?

Heres the image:

This is what I'm doing in code:

import { SpringGrid, measureItems, layout } from 'react-stonecutter';
const Grid = measureItems(SpringGrid, { measureImages: true });

... inside component's render method

<Grid
    component="ul"
    columns={3}
    columnWidth={334}
    gutterWidth={20}
    gutterHeight={20}
    springConfig={{ stiffness: 170, damping: 26 }}
    layout={layout.pinterest}
  >
    {[...(new Array(30)).keys()].map((key) => (
      <li className={s.gridItem} key={key}><Card /></li>
    ))}
</Grid>

[Dan Train]

Hi there, that code all looks ok to me. I'm working on a test case to see if I can reproduce this problem. Sorry for the delay.

[Dan Train]

Could you take a look at this example project and see how it compares?

https://github.com/dantrain/stonecutter-images-example

[Horacio Alexandre Fernandes]

Hi @dantrain I take a look in your example but the problem continues.
I think you should change your example to load data async, from some placeholder image web site, then I'm pretty sure you will see the overlapping happening.