Changes to make it responsive

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

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"
+  }
 }

src/ImageLayout.js

@@ -1,28 +1,54 @@
 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
      */
     getShortestColumn() {
         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(columns) {
+        return columns ?  this.props.containerWidth/columns : this.props.containerWidth/this.getNumberOfColumns()
+    }
+
     /*
      * Determine the top and left positions of the grid item. Update the
      * cached column height.
@@ -31,7 +57,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 +80,16 @@ export default class ImageLayout extends React.Component {
         return (
             <img className="ImageLayout__item"
                 src={item.url}
-                width={this.props.columnWidth}
+                width={this.getColumnWidth()}
                 style={this.getItemStyle(item)}
                 key={index} />
         );
     }
-
+    
     render() {
+        this.columnHeights = Array.from({ length: this.getNumberOfColumns() }, () => 0);
         const { items } = this.props;
+        console.log('render');
         return (
             <div className="ImageLayout" style={{position: 'relative'}}>
                 { items.map(this.renderItem) }
@@ -70,10 +99,10 @@ 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 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
@@ -87,7 +116,9 @@ ImageLayout.propTypes = {
 };
 
 ImageLayout.defaultProps = {
-    columns: 4,
-    columnWidth: 100,
-    gutter: 0
+    gutter: 0,
+    columnMinWidth: 100,
+    columnMaxWidth: 400
 };
+
+export default Dimensions()(ImageLayout) // Enhanced component