以前实现瀑布流都是引用一些基于jQuery封装好的js，但这次项目使用react，着实不想引入那么多js文件，所以找到一种masonry方法，可以很方便实现瀑布流功能。

首先安装 npm install masonry-layout

代码如下

import Masonry from 'masonry-layout';
// 如果瀑布流的内容为图片，此段代码需要图片加载完执行，否则失效
componentWillMount() {
        var elem = document.querySelector('.grid');     
         var msnry = new Masonry( elem, {
                // options
                itemSelector: '.grid-item',
                columnWidth: 180
         });    
         // element argument can be a selector string
         //   for an individual element
         var msnry = new Masonry( '.grid', {
                // options
         });
}
render() {
        return (
                    <div className="grid">
                       <div className="grid-item"></div>
                       <div className="grid-item"></div>
                    </div>
        )
    }

在瀑布流内容为图片时，发现有bug，并不能正常展示图片，原因是，图片未加载完成，就调用了实现瀑布流的代码

改进，等图片加载完，再调用瀑布流代码

import Masonry from 'masonry-layout';
// 如果瀑布流的内容为图片，此段代码需要图片加载完执行，否则失效
const nowNum  = 0
const count = 0

state = {
  data: [
    {
      img: '图片路径'
     }
  ]
}
componentWillMount() {
    count = this.state.data.length
}
onLoadImg = () => {
        nowNum ++;
        if (nowNum === count) {
            // 如果所有图片加载完，调用实现瀑布流代码
            var elem = document.querySelector('.grid');      
            var msnry = new Masonry( elem, {
                // options
                itemSelector: '.grid-item',
                columnWidth: 180
            });
            var msnry = new Masonry( '.grid', {}); 
        }
}
render() {
        const { data } = this.state
        return (
                    <div className="grid">
                       {data.length > 0 && data.map((ele, index) => {
                            return <div className="grid-item" key={index}>
                                    <div> 
                                        <img src={ele.img} alt="" onLoad={this.onLoadImg}/> 
                                    </div>
                                </div>
                        })}
                    </div>
        )
    }

图片加载是一个很慢的过程，最好再加个加载动画，等count===nowNum时隐藏动画

参考文档 https://masonry.desandro.com