图片列表展示

效果图

---

前情概要：近期在react 中想写一个动态排列图片的样式，以下是部分代码，还是前端小菜，有不足之处，希望多多提点哈！

代码如下：

 

<div className='card-images'>

 

{/* 1 */}

<div className='card-images-line'>

<div className='card-images-line-item' onClick={t.handleClickPhotoShow.bind(t,0)}>

<img className="imgOne" src="http://gtms01.alicdn.com/tps/i1/TB12i5PHFXXXXaKXVXXY7J9SpXX-500-699.jpeg" />

</div>

</div>

 

{/* 2-9*/}

<div className='card-images-box'>

<div className='card-images-box-item' onClick={t.handleClickPhotoShow.bind(t,0)}><img className="imgCom" src="http://img18.3lian.com/d/file/201709/14/fca0f66ea21a51aa34c9fd09f1bc1604.jpg" /></div>

<div className='card-images-box-item' onClick={t.handleClickPhotoShow.bind(t,0)}><img className="imgCom" src="http://gtms01.alicdn.com/tps/i1/TB12i5PHFXXXXaKXVXXY7J9SpXX-500-699.jpeg" /></div>

<div className='card-images-box-item' onClick={t.handleClickPhotoShow.bind(t,0)}><img className="imgCom" src="http://img18.3lian.com/d/file/201709/14/fca0f66ea21a51aa34c9fd09f1bc1604.jpg" /></div>

<div className='card-images-box-item'>红色</div>

<div className='card-images-box-item'>红色</div>

<div className='card-images-box-item'>红色</div>

</div>

 

</div>

---

样式：

.card-images{

width: 98vw;

margin: auto;

.imgOne{

max-width:96vw;

}

.imgTwo{

max-height:47vw;

min-width:47vw;

 

}

.imgCom{

max-height:31vw;

min-width:31vw;

 

}

.card-images-line{

 

min-height:49vw;

display:flex;

background: pink;

.card-images-line-item{

flex:1;

margin: 0 1vw;

background: yellow;

 

}

}

.card-images-box{

// width:100vw;

display: flex;

flex-wrap: wrap;

align-content: flex-start;

 

margin:auto;

.card-images-box-item{

flex: 0 0 31%!important;

min-height:31vw;

margin-top: 1vw;

margin-bottom: 1vw;

margin-left: calc((100vw - 31vw * 3) / 4);

box-sizing: border-box;

background:pink;

}

}

}