流式布局照片墻

一、 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’的元素，并放到數(shù)組；

• 獲取每列中高度的最小值所對(duì)應(yīng)的列號(hào)

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

• 重新排列子元素的位置

    /*
     * 排列子元素的位置，并獲取每列的高度
     * @param {Array} childArr 子元素
     * @param {Number} num 列數(shù)
     * */
    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);
                // 獲取列高度最小值所對(duì)應(yīng)的index
                var minHeightOfIndex = getMinIndex(vm.colsHeightArray, minHeightOfCols);
                // 設(shè)置子元素的位置
                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);
    }
  

• 方法調(diào)用

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

以上就是我們頁面重新布局的所有代碼，細(xì)心的小伙伴可能已經(jīng)發(fā)現(xiàn)html上面多了on-finish-render-filters，這個(gè)是干什么用的呢，請(qǐng)看下文

三、自定義指令

• 定義指令

    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);
            }
          }
        };
      });
  

• 調(diào)用

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

指令類型：屬性(restrict:'A'), 在界面渲染時(shí)調(diào)用on-finish-render-filters 屬性，然后再通過 $emit 向 controller 發(fā)送廣播，最后再使用 $on 來接收廣播，繪制流式布局。