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".

[dantrain]

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

[dantrain]

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?

[shaan-toko]

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>

[dantrain]

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.

[dantrain]

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

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

[horaciosystem]

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.