页面上有大量图片排列时的处理方法

1、项目中遇到一个页面需要整页展示图片，总结了一下这种情况下的CSS写法

2、先写好HTML结构

<ul class="infolist clearfix">
  <li class="item" v-for="item in infolist">
     <router-link class="link-text" :key="item._id" :to="{name:'productdetail', params:{imageid:item._id}}">
     <div class="productImage" v-bind:style="{background:'url('+global.normalResourceUrl(item.ImagePath, 'product')+') no-repeat center', backgroundSize:'cover'}"></div>
     <span class="imagename">{{item.Name}}</span>
     </router-link>
  </li>
</ul>

3、假如每行要排列5张图片，css样式设置思路如下：

（1）把最外层ul的width设置为100%

（2）把li的width设置为20%，display设置为inline-block

（3）通过设置li的padding值来体现出左右相邻图片之间的间隔

（4）把li里的div的width设置为100%，设个固定的height和border

（5）把图片当做div的背景图片来设置

.ul{
      position: relative;
      width: 100%;
    .li{
      display: inline-block;
      float: left;
      width:20%;
      margin: 10px 0 0;
      text-align: center;

      &:hover{
        .imagename{
          color: @title-color;
        }
      }
    }
    .productImage{//li里的div
      width: 100%;
      height: 150px;
      text-align: center;
      border: 1px solid @border-color-split;
    }
    .imagename{
      display: block;
      margin-top: 10px;
      color: @text-color;
    }
  }