瀑布流布局：从上往下布局方式（——）往同级元素中高度最低的元素后面排列

html:

 　　　　　　　　　　　　　　　　<div class="col-responsive-5">
                                <a href="javascript:void(0)" class="hy_hover"><img
                                        src="image/index_page/hy002.png"><span
                                        class="hy_info">重庆·22岁·160CM</span></a>
                            </div>
                            <div class="col-responsive-5">
                                <a href="javascript:void(0)" class="hy_hover"><img
                                        src="image/index_page/hy004.png"><span
                                        class="hy_info">重庆 · 25岁 · 160CM</span></a>
                            </div>
                            <div class="col-responsive-5">
                                <a href="javascript:void(0)" class="hy_hover"><img
                                        src="image/index_page/hy006.png"><span
                                        class="hy_info">重庆 · 23岁 · 160CM</span></a>
                            </div>
                            <div class="col-responsive-5">
                                <a href="javascript:void(0)" class="hy_hover"><img
                                        src="image/index_page/hy007.png"><span
                                        class="hy_info">重庆 · 25岁 · 180CM</span></a>
                            </div>
                            <div class="col-responsive-5">
                                <a href="javascript:void(0)" class="hy_hover"><img
                                        src="image/index_page/hy009.png"><span
                                        class="hy_info">重庆 · 29岁 · 160CM</span></a>
                            </div>
                            <div class="col-responsive-5">
                                <a href="javascript:void(0)" class="hy_hover"><img
                                        src="image/index_page/hy004.png"><span
                                        class="hy_info">重庆 · 25岁 · 160CM</span></a>
                            </div>
                            <div class="col-responsive-5">
                                <a href="javascript:void(0)" class="hy_hover"><img
                                        src="image/index_page/hy006.png"><span
                                        class="hy_info">重庆 · 23岁 · 160CM</span></a>
                            </div>
                            <div class="col-responsive-5">
                                <a href="javascript:void(0)" class="hy_hover"><img
                                        src="image/index_page/hy007.png"><span
                                        class="hy_info">重庆 · 25岁 · 180CM</span></a>
                            </div>
                            <div class="col-responsive-5">
                                <a href="javascript:void(0)" class="hy_hover"><img
                                        src="image/index_page/hy009.png"><span
                                        class="hy_info">重庆 · 29岁 · 160CM</span></a>
                            </div>

css:

.col-responsive-5 {
  padding: 0;
  margin-bottom: 10px;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  overflow: hidden; // 必须，否则ios页面上，元素会有一小部分露出来
  & a {
    position: relative;
    display: block;
    overflow: hidden;
    height: inherit;
  }
  & .hy_info {
    font-size: .8rem;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 11rem;
    background: rgba(156, 142, 240, 0.6);
    text-align: center;
    height: 0;
    line-height: 2rem;
    border-radius: 0 0 8px 8px;
    color: #fff;
    width: 100%;
  }
  & img {
    border-radius: 8px;
    //height: auto;
    height: inherit;
    width: 100%;
    display: block;
  }
  &:nth-child(1) {
    height: 17rem;
  }
  &:nth-child(6) {
    height: 17rem;
  }
  &:nth-child(2) {
    height: 11rem;
  }
  &:nth-child(7) {
    height: 21rem;
  }
  &:nth-child(3) {
    height: 12rem;
  }
  &:nth-child(8) {
    height: 11rem;
  }
  &:nth-child(4) {
    height: 14rem;
  }
  &:nth-child(9) {
    height: 16rem;
  }
  &:nth-child(5) {
    height: 14rem;
  }
  &:nth-child(10) {
    height: 17rem;
  }
}

 

 

 

真正实现效果：