(function () {
    'use strict';
    angular
        .module('tmc_app', [])
        .controller('NewsController', NewsController)
        .directive('masonry', masonryDirective)
        .directive('masonryBrick', masonryBrickDirective);
    NewsController.$inject = ['$scope', '$http', '$element', '$timeout'];

    function NewsController($scope, $http, $element, $timeout) {
        var vm = this;
        vm.NewsListResult = { data: [], sortnum: 0, HasData: true };//新闻列表
        
        vm.GetNewsInfo = GetNewsInfo;
        init();
        function init() {
            //不能再init中执行数据获取，因为在加载的时候会执行俩次init
        }
        function GetNewsInfo() {
            $http.post("GetNewsInfo", { sortnum: vm.NewsListResult.sortnum }).success(function (result) {
                if (result) {
                    angular.forEach(result.data, function (item, index) { vm.NewsListResult.data.push(item); });

                    vm.NewsListResult.sortnum = result.sortnum;
                    vm.NewsListResult.HasData = result.HasData;
                    
                }
            });
        }
        /////////
        var bricks = {};
        var schedule = [];
        var destroyed = false;
        //var self = vm;
        var timeout = null;
        vm.preserveOrder = false;
        vm.loadImages = true;
        vm.scheduleMasonryOnce = function scheduleMasonryOnce() {
            var args = arguments;
            var found = schedule.filter(function filterFn(item) {
                return item[0] === args[0];
            }).length > 0;
            if (!found) {
                vm.scheduleMasonry.apply(null, arguments);
            }
        };
        // Make sure it's only executed once within a reasonable time-frame in
        // case multiple elements are removed or added at once.
        vm.scheduleMasonry = function scheduleMasonry() {
            if (timeout) {
                $timeout.cancel(timeout);
            }
            schedule.push([].slice.call(arguments));
            timeout = $timeout(function runMasonry() {
                if (destroyed) {
                    return;
                }
                schedule.forEach(function scheduleForEach(args) {
                    $element.masonry.apply($element, args);
                });
                schedule = [];
            }, 30);
        };
        function defaultLoaded($element) {
            $element.addClass('loaded');
        }
        vm.appendBrick = function appendBrick(element, id) {
            if (destroyed) {
                return;
            }
            function _append() {
                if (Object.keys(bricks).length === 0) {
                    $element.masonry('resize');
                }
                if (bricks[id] === undefined) {
                    // Keep track of added elements.
                    bricks[id] = true;
                    defaultLoaded(element);
                    $element.masonry('appended', element, true);
                }
            }
            function _layout() {
                // I wanted to make this dynamic but ran into huuuge memory leaks
                // that I couldn't fix. If you know how to dynamically add a
                // callback so one could say <masonry loaded="callback($element)">
                // please submit a pull request!
                vm.scheduleMasonryOnce('layout');
            }
            if (!vm.loadImages) {
                _append();
                _layout();
            } else if (vm.preserveOrder) {
                _append();
                //element.imagesLoaded(_layout);--图片的文件js
            } else {
               // element.imagesLoaded(function imagesLoaded() {
                    _append();
                    _layout();
                //});
            }
        };
        vm.removeBrick = function removeBrick(id, element) {
            if (destroyed) {
                return;
            }
            delete bricks[id];
            $element.masonry('remove', element);
            vm.scheduleMasonryOnce('layout');
        };
        vm.destroy = function destroy() {
            destroyed = true;
            if ($element.data('masonry')) {
                // Gently uninitialize if still present
                $element.masonry('destroy');
            }
            $scope.$emit('masonry.destroyed');
            bricks = {};
        };
        vm.reload = function reload() {
            $element.masonry();
            $scope.$emit('masonry.reloaded');
        };
    }
    function masonryDirective() {
        return {
            restrict: 'AE',
            controller: 'NewsController',
            link: {
                pre: function preLink(scope, element, attrs, ctrl) {
                    var attrOptions = scope.$eval(attrs.masonry || attrs.masonryOptions);
                    var options = angular.extend({
                        itemSelector: attrs.itemSelector || '.masonry-brick',
                        columnWidth: parseInt(attrs.columnWidth, 10) || attrs.columnWidth
                    }, attrOptions || {});
                    element.masonry(options);
                    scope.masonryContainer = element[0];
                    var loadImages = scope.$eval(attrs.loadImages);
                    ctrl.loadImages = loadImages !== false;
                    var preserveOrder = scope.$eval(attrs.preserveOrder);
                    ctrl.preserveOrder = preserveOrder !== false && attrs.preserveOrder !== undefined;
                    var reloadOnShow = scope.$eval(attrs.reloadOnShow);
                    if (reloadOnShow !== false && attrs.reloadOnShow !== undefined) {
                        scope.$watch(function () {
                            return element.prop('offsetParent');
                        }, function (isVisible, wasVisible) {
                            if (isVisible && !wasVisible) {
                                ctrl.reload();
                            }
                        });
                    }
                    var reloadOnResize = scope.$eval(attrs.reloadOnResize);
                    if (reloadOnResize !== false && attrs.reloadOnResize !== undefined) {
                        scope.$watch('masonryContainer.offsetWidth', function (newWidth, oldWidth) {
                            if (newWidth != oldWidth) {
                                ctrl.reload();
                            }
                        });
                    }
                    scope.$emit('masonry.created', element);
                    scope.$on('$destroy', ctrl.destroy);
                }
            }
        };
    }
    function masonryBrickDirective() {
        return {
            restrict: 'AC',
            require: '^masonry',
            scope: true,
            link: {
                pre: function preLink(scope, element, attrs, ctrl) {
                    var id = scope.$id, index;
                    ctrl.appendBrick(element, id);
                    element.on('$destroy', function () {
                        ctrl.removeBrick(id, element);
                    });
                    scope.$on('masonry.reload', function () {
                        ctrl.scheduleMasonryOnce('reloadItems');
                        ctrl.scheduleMasonryOnce('layout');
                    });
                    scope.$watch('$index', function () {
                        if (index !== undefined && index !== scope.$index) {
                            ctrl.scheduleMasonryOnce('reloadItems');
                            ctrl.scheduleMasonryOnce('layout');
                        }
                        index = scope.$index;
                    });
                }
            }
        };
    }
})();

<div class="groupmin" ng-app="tmc_app" ng-controller="NewsController as ctrl">
    <div class="groupner grid" masonry>
        <div class="groupner-w grouplef grid-item masonry-brick" ng-repeat="item in ctrl.NewsListResult.data">
            <div><img style="width:229px;height:159px;" src="{{item.NImg}}" /></div>
            <div class="groupner-w01">
                <h4>{{item.NTitle}}</h4>
                <p>{{item.NMark}}</p>
            </div>
            <div class="groupan"><a href="{{item.NHref}}" class="groupbut">查看详情</a></div>
        </div>
    </div>
    <div class="cl"></div>
    <div class="groupmore" ng-show="ctrl.NewsListResult.HasData"><a href="javascript:void(0)" class="groupbut01" ng-click="ctrl.GetNewsInfo()">查看更多</a></div>
</div>