Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
    <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>
</html>
 
.container {
  width: 600px;
}
​
.column {
  display: block;
  width:200px;
  float: left;
}
 
(function() {
  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();
        });
      });
    }
  }
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x