angular瀑布流方案

Html部分

<style>
    .con{width: 1500px;margin: 0 auto;}
    .grid-item { width: 284px;}
    .grid-item img{width: 100%;}
</style>
<body>
<div class="con" ng-app="app" ng-controller="Ctrl">
    <div id="masonry" style="background-color: #999;">
        <!--动态数据-->
        <div class="grid-item" ng-repeat="item in libraryList" on-finish-render>
            <img ng-src="{{item.img}}" alt=""/>
        </div>
        <!--静态数据-->
        <!--<div class="grid-item"><img src="img/01.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/02.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/03.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/04.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/05.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/06.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/07.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/08.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/01.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/02.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/03.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/04.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/05.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/06.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/07.jpg" alt=""/></div>-->
        <!--<div class="grid-item"><img src="img/08.jpg" alt=""/></div>-->
    </div>
</div>
</body>

JS部分

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="jquery-3.0.0.js"></script>
<script src="masonry.pkgd.min.js"></script>
<!--检测图像何时加载-->
<script src="imageLoad.js"></script>
<script>
    var app = angular.module('app', []);
    app.directive('onFinishRender',['$timeout', '$parse', function ($timeout, $parse) {
      return {
          restrict: 'A',
          link: function (scope, element, attr) {
              if (scope.$last === true) {
                   $timeout(function() {
                       scope.$emit('ngRepeatFinished'); //事件通知
//                       var fun = $scope.$eval(attr.onFinishRender);
//                       if(fun && typeof(fun)=='function'){
//                           fun();  //回调函数
//                       }
                   });
              }
          }
      }
  }]);
    app.controller('Ctrl', function ($scope,$http) {
//        var url = "http://api.zhishew.com/v2/web/index/hotResource?page=1";
//        var url = "http://api.zhishew.com/v2/mobile/GatewayPerson/getMaterial?uid=10008";
//        云库首页
        var url = "http://api.zhishew.com/v2/web/CloudLibrary/getListByCategory?id=7&free=3&page=1&px=0";
        $http.get(url).then(function(res){
            $scope.libraryList = res.data.data.data;
            console.log($scope.libraryList)
        });

//    事件监听/处理
      $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
          //下面是在table render完成后执行的js
          var $container = $('#masonry');
          $container.imagesLoaded( function(){
              $container.masonry({
                  itemSelector : '.grid-item',
                  gutter : 20,
                  isAnimated: true
              });
          });
      });
    });
</script>

 

posted @ 2018-03-22 09:44  Vonson  阅读(494)  评论(0)  编辑  收藏  举报