方案一：多列布局

Multiple-column layout 文档

实现步骤

设置父容器（content）的column-count用来指定列数，接着将子容器的img标签宽和高均设置为100%

示例

在线示例
样式（less）

.content {
  width: 100%;
  height: 100%;
  column-count: 4;
  column-gap:5px; 
}

.content-item img {
   width:100%;
   height:100%;
}

布局

<div class="content">
  <div class="content-item">
    <img src="https://i.pinimg.com/236x/09/16/e0/0916e0231fc99916097e68ef08c6cdc0.jpg" />
  </div>
  <div class="content-item">
    <img src="https://i.pinimg.com/236x/44/d4/c3/44d4c397ff1831222a32620006d3e4ae.jpg" />
  </div>
  <div class="content-item">
    <img src="https://i.pinimg.com/236x/a6/cd/0a/a6cd0a15d5b2909539dd7944201127d2.jpg" />
  </div>
  <div class="content-item">
   <img src="https://i.pinimg.com/236x/d7/fb/60/d7fb60b2321149a83ab5dbe94744ced6.jpg" />
  </div>
   <div class="content-item">
    <img src="https://i.pinimg.com/236x/09/16/e0/0916e0231fc99916097e68ef08c6cdc0.jpg" />
  </div>
  <div class="content-item">
    <img src="https://i.pinimg.com/236x/44/d4/c3/44d4c397ff1831222a32620006d3e4ae.jpg" />
  </div>
  <div class="content-item">
    <img src="https://i.pinimg.com/236x/a6/cd/0a/a6cd0a15d5b2909539dd7944201127d2.jpg" />
  </div>
  <div class="content-item">
   <img src="https://i.pinimg.com/236x/d7/fb/60/d7fb60b2321149a83ab5dbe94744ced6.jpg" />
  </div>
</div>

缺陷

元素排列顺序只能为从上到下，从左到右。