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