React

by Abdul Ahmad

HTML

<div id="app"></div>

CSS

body {
  background: #ecf0f3;
  padding: 20px;
  font-family: Helvetica;
  color: #444;
}

#app {
  border-radius: 3px;
  padding: 20px;
  transition: all 0.2s;
}

.album {
  display: flex;
}

.column {
  flex-grow: 1;
  flex-shrink: 1;
}

.photo {
  background: white;
  width: calc(100% - 10px);
  margin: 10px auto;
  min-height: 100px;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #dde2e4;
  border-radius: 3px;
}

React

class TodoApp extends React.Component {
  state = {
  	allItems: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
  };
  
  separatePhotosForColumns() {
  	// split the items into 3 arrays
    // i'll just return 3 arrays for simplicity here
    return {
    	one: [1, 4, 7, 10, 13, 16, 19],
      two: [2, 5, 8, 11, 14, 17, 20],
      three: [3, 6, 9, 12, 15, 18]
    };
  }
  
  render() {
 		const parts = this.separatePhotosForColumns();
    return (
      <div className='album'>
        <Column data={parts.one} />
        <Column data={parts.two} />
        <Column data={parts.three} />
      </div>
    )
  }
}

class Column extends React.PureComponent {
	getRandomHeight() {
  	return Math.floor(Math.random() * 200) + 150;
  }
  
	render() {
  	const { data } = this.props;
    const images = data.map(i => (
    	<div 
        className='photo' 
        key={i} 
        style={{ height: this.getRandomHeight() }}>
        { i }
      </div>
    ));
		return (
    	<div className='column'>
    	  { images }
    	</div>
    );
  }
}


ReactDOM.render(<TodoApp />, document.querySelector("#app"))