瀑布流在Angularjs中的使用

      在Angularjs向前台页面进行渲染时，处于循环中的div的内容不一样，从而导致div的高度不一致，导致样式错乱。因此需要在Angularjs中使用瀑布流。

     在网上进行了瀑布流代码的搜寻，最终选择了以下代码，这部分代码源自http://www.oschina.net/code/snippet_114440_10309。使用的是绝对定位，原理为：通过控制每一个块相对于父块的距离(left,top)来实现瀑布流。代码如下：

function Waterfall(param){
this.id = typeof param.container == 'string' ? document.getElementById(param.container) : param.container;
this.colWidth = param.colWidth;
this.colCount = param.colCount || 4;
this.cls = param.cls && param.cls != '' ? param.cls : 'wf-cld';
this.init();
}
Waterfall.prototype = {
getByClass:function(cls,p){
var arr = [],reg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)","g");
var nodes = p.getElementsByTagName("*"),len = nodes.length;

for(var i = 0; i < len; i++){
if(reg.test(nodes[i].className)){
arr.push(nodes[i]);
reg.lastIndex = 0;
}
}
return arr;
},
maxArr:function(arr){
var len = arr.length,temp = arr[0];
for(var ii= 1; ii < len; ii++){
if(temp < arr[ii]){
temp = arr[ii];
}
}
return temp;
},
getMar:function(node){
var dis = 0;
if(node.currentStyle){
dis = parseInt(node.currentStyle.marginBottom);
}else if(document.defaultView){
dis = parseInt(document.defaultView.getComputedStyle(node,null).marginBottom);
}
return dis;
},
getMinCol:function(arr){
var ca = arr,cl = ca.length,temp = ca[0],minc = 0;
for(var ci = 0; ci < cl; ci++){
if(temp > ca[ci]){
temp = ca[ci];
minc = ci;
}
}
return minc;
},
init:function(){
var _this = this;
var col = [],//列高
iArr = [];//索引
var nodes = _this.getByClass(_this.cls,_this.id),len = nodes.length;
for(var i = 0; i < _this.colCount; i++){
col[i] = 0;
}
for(var i = 0; i < len; i++){
nodes[i].h = nodes[i].offsetHeight + _this.getMar(nodes[i]);
iArr[i] = i;
}

for(var i = 0; i < len; i++){
var ming = _this.getMinCol(col);
nodes[i].style.left = ming * _this.colWidth + "px";
nodes[i].style.top = col[ming] + "px";
col[ming] += nodes[i].h;
}

_this.id.style.height = _this.maxArr(col) + "px";
}
};

页面中使用的定位样式为：

.wf-main{
position: relative;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
.wf-main .wf-cld{
position: absolute;
padding:5px 8px;
width: 33.33%;
line-height:18px;
border-radius: 4px;
overflow: hidden;
}

html页面中使用Angularjs中从后台取值并进行渲染，部分代码如下：

<div class="wf-main" id="wf-main" style="height: auto;">
<div class="col-md-4 ng-scope wf-cld" ng-repeat="config in configList" on-finish-render-filters>
<div>
<table class="table table-bordered">
<thead>
<tr>
<th class="ng-binding" colspan="4" style="text-align: center;">{{config.desc}}</th>
</tr>
<tr>
<th>名称</th>
<th>数值</th>
<th>名称</th>
<th>数值</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="conf in config.config ">
<th scope="row">{{conf.desc1}}</th>
<td name="config_{{conf.name1}}"></td>
<td>{{conf.desc2}}</td>
<td name="config_{{conf.name2}}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

使用Angularjs标签ng-repeat进行循环渲染。在此有一点需要注意：在Angularjs渲染结束后才能进行瀑布流代码的使用。因此在上述html代码中增加了标记on-finish-render-filters,用来标记当Angularjs是否渲染完成。在Angularjs中通过directive进行判断，代码如下：

app.directive('onFinishRenderFilters', function ($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) {
$timeout(function() {
scope.$emit('ngRepeatFinished');//向控制器发射渲染完成的消息。
});
}
}
};

这样在后台的控制器中，可以通过消息来进行瀑布流的使用。控制器中的部分代码如下：

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
//进行瀑布流
new Waterfall({
"container":"wf-main",
"colWidth":390,
"colCount":3
});
});

如此，就完成了瀑布流代码的使用。但是现在有一个新的问题：如果需要每秒中需要向后台请求数据，使用此种方式也可以实现瀑布流的渲染，但是，这个时候，瀑布流已经渲染好了，如果出现后台中传递的数值的值过长会导致有一些块的高度会比瀑布流渲染时高，导致上下的两个块有可能重叠(由于使用的是绝对定位)。

 此时瀑布流的渲染就不宜放在angularjs渲染完毕后进行，需要放置在数据赋值完毕后，实际上是重新计算块的高度。