css+js瀑布流内容高度自适应

直接上代码，来不及解释了。↓↓↓

/** * 设置瀑布流的高度为窗体高度  */$("#content").height($(window).height());

<div id="content">            <div id="imgM" class="trip-bg" ng-click="openModal(businessTypeList[2])">                  <div class="centered">                    <i class="icon img trip-png"></i>                    <p class="light">出差申请</p>                </div>            </div>             <div id="imgM" class="attendance-bg" ng-click="openModal(businessTypeList[6])">                  <div class="centered">                    <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:0px;  -webkit-column-gap:0px;  column-gap:0px;  padding: 10px;}.img{background-size:100% 100%;display: inline-block;position: relative;height: 50px;width: 50px;margin: 0px 0px 0px 0px;}#imgM {  position: relative;  padding: 5px;  text-align: center;  border: solid 1px #eeeeee;  border-radius: 4px;  cursor: pointer;  width: 100%;  break-inside:avoid;  box-sizing: border-box;}.trip-bg{    background: url(../img/operationCenter/trip_bg.jpg) no-repeat center;    height: 25%;}.trip-png{    background-image: url(../img/operationCenter/trip_img.png);}.attendance-bg{    background: url(../img/operationCenter/attendance_bg.jpg) no-repeat center;    height: 25%;}.attendance-png{    background-image: url(../img/operationCenter/attendance_img.png);}

.centered {    position: relative;    top: 50%;    margin-top: -43px;}

通过jquery来设置整个瀑布流盒子高度为窗体高度，而每列内的小盒子高度则用百分比，百分之只和一定得是100%，或者说每列盒子的百分比数一定相等。这样就可以底部等高，而不会出现参差不齐了。

最后来张效果图↓