WaterfallReact

Responsive and Interactive Pinterest Like Image Gallery by React

##install

npm install waterfall-react;

import Waterfall from "waterfall-react";

##Usage

let images = [
    ["url/0.jpg", "message0"],
    ["url/1.jpg", "message1"],
    ["url/2.jpg", "message2"],
    ["url/3.jpg", "message3"],
    ["url/4.jpg", "message4"],
    ["url/5.jpg", "message5"],
    ...
];
...
clickNumber(index) {
    console.log(index);
}
...
<Waterfall column="3" image={images} /> //when you don't want interact with click on images
<Waterfall column="5" image={images} clickNumber={this.clickNumber.bind(this)} />

1. Passing all the images url and message you want to show above the image, pass it to Waterfall-React by an array. Waterfall-React will automatically layout all the images by the number of columns you defined.
2. Show messages above images when mouser over.
3. All the images is responsive according to screen width and the messages above images is responsive too.
4. Automatically balance the height of each column. Make all the columns balanced.
5. Return the index number of the image in the array if users click on it.

##Example Demo

1. Auto layout by columns numbers you defined
   
   
2. Responsive with Screens
   
   
3. Even the height of each column
   
   
4. Return index number of the image in array after users click on it