react插件推荐-瀑布流-macy

安装

yarn add macy

使用前

由于包版本较旧，没有提供type文件，需要将declare module 'macy';
添加到src目录下的typings.d.ts

使用

componentDidMount() {
  this.getMacy();
}
getMacy = () => {
  const { masonry } = this.state;
  if (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: 3, // 设置列数
    });
    this.setState({ masonry });
  }
};

注意

container下的子元素，必须设置宽度为'.macy-container'的100%