react-webpack 照片墙制作（二）

接着一的内容，我们继续。之前准备工作以及舞台数据等都准备好了。
接下来，先对单个图片的布局样式设置好，在src/components的main.js里添加如下代码

//单个图片组件
class ImgFigure extends React.Component{
   
  render(){
    return(
        <figure className="img-figure" >
          <img  src={
  this.props.data.imageURL} alt={
  this.props.data.title} />
          <figcaption>
            <h2 className="img-title">{
  this.props.data.title}</h2>
          </figcaption>
        </figure>

      );
  }
}

然后在app.scss里添加样式，这个是在.img-sec下的，

.img-sec {
    position: relative;

    width: 100%;
    height: 90%;
    overflow: hidden;

    background-color: #ddd;
    /*****添加代码*******/
    @at-root{
   
      .img-figure{
        position: absolute;

        width: 320px;
        height: 360px;
        margin: 0;
        padding: 40px;
        background-color: #fff;
        box-sizing: border-box;
      }
      figcaption{
        text-align: center;

        .img-title{
          margin:20px 0 0 0;
          color: #a7a0a2;
          font-size: 16px;
        }
      }
    }
}

效果如下图

到了这里图片会顺序排到底部。我们接下来分析照片墙位置，获取所有的位置信息。这里也是按照慕课网分析的写的。
在main.js 里的AppComponent组件里添加函数如下，代码中的rearrange函数为重新排布位置函数，后续有相关补充。

componentDidMount(){