AngularJs流式布局

流式布局照片墙

一、 HTML

<div class='box' ng-repeat="img in imgs track by $index" on-finish-render-filters>
    <img class='item' ng-src='{{img}}'>
</div>

二、JS

• 获取所有布局元素

    function getAllChild(parent, className) {
        vm.childName = parent.getElementsByTagName("*");
        vm.tempArray = [];
        for (var i in vm.childName) {
            if (vm.childName[i].className === className) {
                vm.tempArray.push(vm.childName[i]);
            }
        }
        return vm.tempArray;
    }
  

获取类选择器中class='box'中的所有class=‘item’的元素，并放到数组；

• 获取每列中高度的最小值所对应的列号

    function getMinIndex(onlyOneColsArr, minHeight) {
        for (var i in onlyOneColsArr) {
            if (onlyOneColsArr[i] === minHeight) {
                return i;
            }
        }
    } 
  

• 重新排列子元素的位置

    /*
     * 排列子元素的位置，并获取每列的高度
     * @param {Array} childArr 子元素
     * @param {Number} num 列数
     * */
    function getMinHeightOfCols(childArr, num) {
        for (var i = 0; i < childArr.length; i++) {
            if (i < num) {
                //获取每列的高度
                vm.colsHeightArray[i] = childArr[i].offsetHeight;
            } else {
                // 获取每列中高度的最小值
                var minHeightOfCols = Math.min.apply(null, vm.colsHeightArray);
                // 获取列高度最小值所对应的index
                var minHeightOfIndex = getMinIndex(vm.colsHeightArray, minHeightOfCols);
                // 设置子元素的位置
                childArr[i].style.position = "absolute";
                childArr[i].style.top = minHeightOfCols + 'px';
                childArr[i].style.left = childArr[minHeightOfIndex].offsetLeft + "px";
                //重置高度最小的列的高度
                vm.colsHeightArray[minHeightOfIndex] += childArr[i].offsetHeight;
            }
        }
    }
  

• 方法主体

    function photoWall(parent, child) {
      /*
       * 获取class为parent的元素
       * */
      vm.parent = document.getElementsByClassName(parent);
      //获取class为child的div
      var childArray = vm.getAllChild(vm.parent, child);
      vm.getMinHeightOfCols(childArray, 2);
    }
  

• 方法调用

    vm.photoWall('box', 'item');
  

以上就是我们页面重新布局的所有代码，细心的小伙伴可能已经发现html上面多了on-finish-render-filters，这个是干什么用的呢，请看下文

三、自定义指令

• 定义指令

    angular.module('onFinishRenderFilterModule', [])
      .directive('onFinishRenderFilters', function ($timeout) {
        return {
          restrict: 'A',
          link: function (scope, element, attr) {
            if (scope.$last === true) {
              $timeout(function () {
                scope.$emit('ngRepeatFinished');
              }, 200);
            }
          }
        };
      });
  

• 调用

    $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
        $timeout(function () {
            vm.photoWall('box', 'item');
        }, 200);
    });
  

指令类型：属性(restrict:'A'), 在界面渲染时调用on-finish-render-filters 属性，然后再通过 $emit 向 controller 发送广播，最后再使用 $on 来接收广播，绘制流式布局。