React Masonry sample

Bootstrap 4-alpha card / React / Masonry layout ref: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html

by Masaki Moriwaki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="deck"></div>

CSS

.card {
    position: absolute;
    
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

JavaScript 1.7

Array.prototype.min = function () {
    return Math.min.apply(null, this);
};

var Deck = React.createClass({
    layCards: function () {
        if (this.props.data.length < 1) return;
        
        var margin = parseInt(this.props.margin, 10);
        var frameWidth = window.innerWidth;
        var columnWidth = this.refs.card0.offsetWidth;
        var columnCount = Math.floor(frameWidth / (columnWidth + margin));
        var spaceLeft = (frameWidth - ((columnWidth + margin) * columnCount + margin)) / 2;

        var blocks = [];
        var i;
        for (i = 0; i < columnCount; i += 1) {
            blocks.push(margin);
        }

        var ref = '';
        var max = this.props.data.length;
        
        var min;
        var hight;
        var index;
        var left;
        for (i = 0; i < max; i += 1) {
            ref = 'card' + i;
            min = blocks.min();
            index = blocks.indexOf(min);
            left = margin + (index * (columnWidth + margin));
            this.refs[ref].style.left = spaceLeft + left + 'px';
            this.refs[ref].style.top = min + 'px';
            
            blocks[index] = min + this.refs[ref].offsetHeight + margin;
        }
    },
    
    componentDidMount: function () {
        window.addEventListener('resize', this.layCards);
        
        this.layCards();
    },
    
    componentWillUnmount: function() {
        window.removeEventListener('resize', this.layCards);
    },
    
    render: function () {
        var cardStyle = this.props.cardStyle;
        return (
            <div>
                {this.props.data.map(function (datum, i) {
                    return (
                        <div className="card" ref={'card' + i} key={i} style={cardStyle}>
                            <div className="card-block">
                                <p className="card-text">
                                    {i} {datum.text}
                                </p>
                           ...