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盒子 -->
</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 论别人家的实现。