css实现简单瀑布流以及存在的问题

最近有个页面布局需要改为瀑布流的形式，就只单纯显示并没做上拉加载更多的。
先给张效果图，不是很好只是有瀑布流的效果而已：

<div id="content">
        <div id="imgM" class="trip-bg" ng-click="openModal(businessTypeList[2])">  
            <i class="icon img trip-png">i>
            <p class="light">出差申请p>
        div> 

        <div id="imgM" class="attendance-bg" ng-click="openModal(businessTypeList[6])">  
            <i class="icon img attendance-png">i>
            <p class="light">考勤补登记p>
        div> 
        
div>

css内容：

#content{
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap:5px;
  -webkit-column-gap:5px;
  column-gap:5px;
  padding: 10px;

}

.img{
    background-size:100% 100%;
    display: inline-block;
    position: relative;
    height: 50px;
    width: 50px;
    margin: 10px 0px 0px 0px;
}
#imgM {
  position: relative;
  padding: 5px;
  text-align: center;
  margin: 5px;
  border: solid 2px #eeeeee;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  break-inside:avoid;
  box-sizing: border-box;
}

#imgM p{
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    /*margin: 0px 20px 0px 20px;*/
    font-size:medium;
}
.trip-bg{
    background: url(../img/operationCenter/trip_bg.jpg) no-repeat center;
    height: 130px;
}
.trip-png{
    background-image: url(../img/operationCenter/trip_img.png);
}
.attendance-bg{
    background: url(../img/operationCenter/attendance_bg.jpg) no-repeat center;
    height: 130px;
}
.attendance-png{
    background-image: url(../img/operationCenter/attendance_img.png);
}

1.利用 column-count:属性来分多少列。
2.把所有内容往子盒子里填充就好。它会自动排列，这里每个盒子的高度是我自己写死的，你们也可以用random产生随机高度，但效果会每次进页面瀑布流布局都不一样。或者你可以获取图片的高度属性（这个有哪位大神能教下）。
我这里每个子盒子的背景以及图标、文字都是单独的，所以要拼装。把共同属性抽出来单独一个class样式。

写到这里会出现一个问题：列表的内容跨列，破坏整体的布局。
要解决这问题只要在每个子盒子的div样式上加上

 break-inside:avoid;
  box-sizing: border-box;

这两个样式属性一般都没问题。

http://blog.csdn.net/luviawu/article/details/70313096 论别人家的实现。