React-virtualized: Please provide masonry demo with responsive layout, full width

Created on 8 Jan 2018  路  4Comments  路  Source: bvaughn/react-virtualized

something like this plunker
in my example, I was required to clean the all cache on every resize event

i have used other func for calculate columns

_calculateColumnCount() {
    const brakePoints = [640, 768, 920, 1200, 1400];
    this._columnCount = brakePoints.reduceRight( (p, c, i) => {
      return c < this._width ? p : i;
    }, brakePoints.length) + 1;

    this._columnWidth = Math.floor(
      (this._width - this._columnCount * this._gutterSize) / this._columnCount
    );
  }

Maybe you can combine _(as i look in source code it not possible)_ ColumnSizer with Masonry?)

Most helpful comment

I did it on my plunker demo, (plunker don't worked, i have create copy of demo on jsbin)
but it seems to me i have lags,
so i'll try create new example later

All 4 comments

There is already a demo like this. It uses the full width of the page and is responsive on resize. The source code for it is right here, in GitHub.

You do not understood me, i told about something ColumnSizer for each masonry item, columns should have flexible not fixed width

The demo I linked to shows how you can change column width as well. Not using ColumnSizer but the logic for that component is extremely small so you can just do it in your own application code.

I did it on my plunker demo, (plunker don't worked, i have create copy of demo on jsbin)
but it seems to me i have lags,
so i'll try create new example later

Was this page helpful?
0 / 5 - 0 ratings