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>