var PinterestLayout = React.createClass({

  getDefaultProps: function() {

    // Our layout component can split into

    // an arbitrary number of columns.

    return {

      colSize: 3,

      numCols: 4

    }

  },

​

  render: function() {

    // Here we'll just use Lo-dash's `chunk` method to

    // split our data into the right sized groups.

    var groups = _.chunk(this.props.items, this.props.numCols);

    // Now `groups` is an array of arrays.

    // Let's render a row for each group.

    return <div>{groups.map(this.renderRow)}</div>;

  },

​

  renderRow: function(row) {

    // Now `row` is just an array of four items,

    // which we can render just how you'd expect.

    return <div className="row">{row.map(this.renderItem)}</div>;

  },

​

  renderItem: function(item) {

    var className = "col-sm-" + this.props.colSize;

    return <div className={className}>{item}</div>;

  }

});

​

var Panel = React.createClass({

  render: function() {

    return (

      <div className="panel panel-default">

        <div className="panel-body">{this.props.children}</div>

      </div>

    );

  }

})

​

var items = _.range(1, 100).map(function(item) {

  return <Panel>{item}</Panel>;

});

​

var app = (

  <div className="container">

    <PinterestLayout items={items} colSize={4} numCols={3} />

  </div>

);

​

React.render(app, document.getElementById("container"));