From f95a86c4795b10083038378f45013380558bd709 Mon Sep 17 00:00:00 2001 From: Leonardo Alves Date: Thu, 7 Apr 2016 16:41:19 +0000 Subject: [PATCH 1/2] Responsive with Fixed Columns --- package.json | 5 ++++- src/ImageLayout.js | 30 +++++++++++++++++++----------- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index e86e565..1fe95fc 100644 --- a/package.json +++ b/package.json @@ -66,5 +66,8 @@ "bugs": { "url": "https://github.com/zackargyle/react-image-layout/" }, - "homepage": "https://github.com/zackargyle/react-image-layout#readme" + "homepage": "https://github.com/zackargyle/react-image-layout#readme", + "dependencies": { + "react-dimensions": "^1.0.2" + } } diff --git a/src/ImageLayout.js b/src/ImageLayout.js index 92118c2..b70c946 100644 --- a/src/ImageLayout.js +++ b/src/ImageLayout.js @@ -1,20 +1,19 @@ import React from 'react'; +import Dimensions from 'react-dimensions' /* * The classic "masonry" style Pinterest grid * @prop {number} columns - the number of columns in the grid - * @prop {number} columnWidth - the fixed width of the columns * @prop {number} gutter - the number of columns in the grid * @prop {Array} items - the list of items to render */ -export default class ImageLayout extends React.Component { - +class ImageLayout extends React.Component { + constructor(props) { super(props); - this.columnHeights = Array.from({ length: props.columns }, () => 0); this.renderItem = this.renderItem.bind(this); } - + /* * Get the shortest column in the list of columns heights */ @@ -23,6 +22,13 @@ export default class ImageLayout extends React.Component { return this.columnHeights.indexOf(minValue); } + /* + * Get the column width + */ + getColumnWidth() { + return this.props.containerWidth/this.props.columns; + } + /* * Determine the top and left positions of the grid item. Update the * cached column height. @@ -31,7 +37,8 @@ export default class ImageLayout extends React.Component { * @param {Object} item.width - the grid item's image width */ getItemStyle(item) { - const { columnWidth, gutter } = this.props; + const gutter = this.props.gutter; + const columnWidth = this.getColumnWidth(); const shortestColumnIndex = this.getShortestColumn(); const left = ( columnWidth + gutter ) * shortestColumnIndex; const top = this.columnHeights[shortestColumnIndex]; @@ -53,14 +60,16 @@ export default class ImageLayout extends React.Component { return ( ); } - + render() { + this.columnHeights = Array.from({ length: this.props.columns }, () => 0); const { items } = this.props; + console.log('render'); return (
{ items.map(this.renderItem) } @@ -72,8 +81,6 @@ export default class ImageLayout extends React.Component { ImageLayout.propTypes = { // The number of columns in the grid columns: React.PropTypes.number, - // The fixed width of the columns in the grid - columnWidth: React.PropTypes.number, // The size of the gutter between images gutter: React.PropTypes.number, // The list of images to render @@ -88,6 +95,7 @@ ImageLayout.propTypes = { ImageLayout.defaultProps = { columns: 4, - columnWidth: 100, gutter: 0 }; + +export default Dimensions()(ImageLayout) // Enhanced component \ No newline at end of file From bab23ba30247d556fec6dc60228d7381157b4339 Mon Sep 17 00:00:00 2001 From: Leonardo Alves Date: Thu, 7 Apr 2016 19:57:20 +0000 Subject: [PATCH 2/2] Responsive with columnMinWidth, columnsMaxWidth and dynamic columns --- README.md | 12 ++++++------ src/ImageLayout.js | 37 ++++++++++++++++++++++++++++++------- 2 files changed, 36 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index b1cf33c..fe73bb4 100644 --- a/README.md +++ b/README.md @@ -10,12 +10,12 @@ npm install react-image-layout --save ## ImageLayout Props -prop | type | default | notes ------------ | ------ | ---------- | ---------- -gutter | number | 0 | the margin between grid elements -columns | number | 4 | the number of columns to use in the grid -columnWidth | number | 100 | the fixed width of the columns -items | Array | `required` | the list of image objects +prop | type | default | notes +----------- | ------ | ---------- | ---------- +gutter | number | 0 | the margin between grid elements +columnMinWidth | number | 100 | the minimum fixed width (px) of the columns +columnMaxWidth | number | 400 | the maximum fixed width (px) of the columns +items | Array | `required` | the list of image objects Use: ``` js diff --git a/src/ImageLayout.js b/src/ImageLayout.js index b70c946..1938ecd 100644 --- a/src/ImageLayout.js +++ b/src/ImageLayout.js @@ -21,12 +21,32 @@ class ImageLayout extends React.Component { const minValue = Math.min(...this.columnHeights); return this.columnHeights.indexOf(minValue); } + + /* + * Get the column width + * @columnWidth {number} - Optional + */ + getNumberOfColumns(columnWidth) { + if(columnWidth) { + return Math.round(this.props.containerWidth/columnWidth); + } + else { + //loop columnMinWidth and columnMaxWidth to get the number of columns + let columns = 0; + for(var x = this.getNumberOfColumns(this.props.columnMinWidth); x >= this.getNumberOfColumns(this.props.columnMaxWidth); x--) { + columns = x; + } + console.log(columns) + return columns; + } + } /* * Get the column width + * @columns {number} - Optional */ - getColumnWidth() { - return this.props.containerWidth/this.props.columns; + getColumnWidth(columns) { + return columns ? this.props.containerWidth/columns : this.props.containerWidth/this.getNumberOfColumns() } /* @@ -67,7 +87,7 @@ class ImageLayout extends React.Component { } render() { - this.columnHeights = Array.from({ length: this.props.columns }, () => 0); + this.columnHeights = Array.from({ length: this.getNumberOfColumns() }, () => 0); const { items } = this.props; console.log('render'); return ( @@ -79,8 +99,10 @@ class ImageLayout extends React.Component { } ImageLayout.propTypes = { - // The number of columns in the grid - columns: React.PropTypes.number, + // The max width of columns in the grid + columnMaxWidth: React.PropTypes.number, + // The min width of columns in the grid + columnMinWidth: React.PropTypes.number, // The size of the gutter between images gutter: React.PropTypes.number, // The list of images to render @@ -94,8 +116,9 @@ ImageLayout.propTypes = { }; ImageLayout.defaultProps = { - columns: 4, - gutter: 0 + gutter: 0, + columnMinWidth: 100, + columnMaxWidth: 400 }; export default Dimensions()(ImageLayout) // Enhanced component \ No newline at end of file