接着一的内容,我们继续。之前准备工作以及舞台数据等都准备好了。
接下来,先对单个图片的布局样式设置好,在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(){