Question

不同高度和恒定宽度的图像数组。必须填写页面，以便彼此紧密精简。

在jQuery上。共有3列。第一步是加载图像，在事件onLoad之后，下一步 - 在最低列中移动图像。

但是角度这会导致困难，切割和混合物品并不擅长做角度。

设计的解决方案之一。存储数组的每一列和所有图片列的数组。每个单独加载图片的字段，将事件发送到顶部，控制器必须选择最低列并将图像粘贴到其数组中。但是我对angularJs

的实现有一个问题

 <div class="container" ng-controller="columnCtrl">
     <div class="column" ng-column="column1">
       <div ng-repeat="imageSrc in columns.column1.imagesSrc">
           <img ng-load="$emit('loadImg')" 
                src="{{imageSrc}}" alt="img" />
       </div>
     </div>

     <div class="column" ng-column="column2">
       <div ng-repeat="imageSrc in columns.column2.imagesSrc">
           <img ng-load="$emit('loadImg')" 
                src="{{imageSrc}}" alt="img" />
       </div>
     </div>
 </div>

Full example of solving this problem - Pluker

Answer 1

HTML：

<body ng-app="app">
  <div class="container" ng-controller="MainController as main">
    <div class="column" ng-repeat="column in main.columns">
      <div ng-repeat="image in column.images">
        <img load src="{{image}}" alt="img" />
      </div>
    </div>
  </div>
</body>

使用Javascript：

angular
  .module('app', [])
  .controller('MainController', MainController)
  .service('columnsService', columnsService)
  .directive('load', loadDirective);

function MainController($scope, columnsService) {
  var vm = this;
  vm.columns = columnsService.columns;
  columnsService.init([
   'http://www.myschool21.narod.ru/mountain/images/fr_1041.jpg',
  'http://wallpaperscraft.ru/image/92232/200x300.jpg?orig=3',
  'http://cs10573.vk.me/g24449285/a_e2f12ad0.jpg',
  'http://static2.gooddays.ru/photos/0002/6209/andorra_preview.jpg?1241084584',
  'http://www.comunicom.ru/images/stories/PHOTO-2013/MINI/3.jpg'
  ]);
}

function columnsService() {
  var service = {
    images: [],
    columnsCount: 3,
    columns: [],
    init: init,
    initColumns: initColumns,
    pushNextImage: pushNextImage,
    getLowestColumn: getLowestColumn,
    updateColumn: updateColumn
  };
  return service;

  function init(images) {
    service.images = images;
    service.initColumns();
    service.pushNextImage();
  }

  function initColumns() {
    for (var i = 0; i < service.columnsCount; i++) {
      service.columns[i] = {
        height: 0,
        images: []
      };
    }
  }

  function pushNextImage() {
    var image = service.images.shift();
    if (image) {
      var column = service.getLowestColumn();
      column.images.push(image); 
    }
  }

  function getLowestColumn() {
    var minIndex = null;
    var minHeight = null;
    angular.forEach(service.columns, function(column, index) {
      if (minIndex === null || column.height < minHeight) {
        minIndex = index;
        minHeight = column.height;
      }
    });
    return service.columns[minIndex];
  }

  function updateColumn(index, height) {
    service.columns[index].height += height;
  }
}

function loadDirective(columnsService) {
  var directive = {
    restrict: 'A',
    link: link
  };
  return directive;

  function link($scope, element, attrs) {
    element.on('load', function(event) {
      $scope.$apply(function() {
        columnsService.updateColumn($scope.$parent.$index, element[0].offsetHeight);
        columnsService.pushNextImage();
      });
    });
  }
}

直播：http://jsbin.com/qunih/1/edit

Answer 2

非常感谢Navix，你正是在解决我的需要。

应该将其添加到稍后加载图片的服务方法中。

var service = {
  images: [],
  columnsCount: 3,
  columns: [],
  init: init,
  initColumns: initColumns,
  pushImages: pushImages,
  pushNextImage: pushNextImage,
  getLowestColumn: getLowestColumn,
  updateColumn: updateColumn
};
return service;

function addImages(images) {
  service.images = service.images.concat(images);
  service.pushNextImage();
}

Plunker

此模块可以重复用于放置在不同高度的浮动图像页面上。

Angularjs上具有不同高度的浮动单元

2 个答案: