react中使用macy插件实现瀑布流布局

这是一款非常轻量级的纯原生JS的瀑布流插件——Macy.js，如今图片和视频网站非常多，非常适应瀑布流这样的布局方式来呈现给用户。适合比较复杂的布局

1.首先先安装并且在页面引入
安装方式根据自己的需求，个人比较使用npm

使用npm安装：
npm install macy

使用Bower安装：
bower install macy

通过jsDelivr CDN包含
<script src="https://cdn.jsdelivr.net/npm/macy@2"></script>

引入
import Macy from 'macy'

2.布局方式要适合一个容器里包裹着一样的盒子
例如：

<ul class="macy-container">
   <li>
     <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1078861629,3747050294&fm=26&gp=0.jpg"/>
     <p>瀑布流p>
   li>
   <li>
     <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg"/>
     <p>瀑布流p>
   li>
   <li>
     <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg"/>
     <p>瀑布流p>
   li>
     <li>
     <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1091405991,859863778&fm=26&gp=0.jpg"/>
     <p>瀑布流p>
   li>
   <li>
     <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1078861629,3747050294&fm=26&gp=0.jpg"/>
     <p>瀑布流p>
   li>
   <li>
     <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1078861629,3747050294&fm=26&gp=0.jpg"/>
     <p>瀑布流p>
   li>
ul>

3.css布局时图片宽要给父盒子的100%

.macy-container{
  width: 750px;
  li{
   width: 50%;
   >img{
     width: 100%;
   }
  }
}

4.方法使用：(刚进入页面时就调用此方法）

  getMacy = () => {
    if (this.state.masonry) {
      this.state.masonry.reInit()
    } else {
      let masonry = new Macy({
        container: '.macy-container', // 图像列表容器
        trueOrder: false,
        waitForImages: false,
        useOwnImageLoader: false,
        debug: true,
        margin: { x: 13, y: 4 },    // 设计列与列的间距
        columns: 2,    // 设置列数
      })
      this.setState({ masonry })
    }
  }

效果图如下：

要想详细了解macy的适用方法点击下面链接即可
https://www.npmjs.com/package/macy