AngularJS allows for the creation of floating elements with various heights

Question

AngularJS allows for the creation of floating elements with various heights

An array of images with varying heights but constant width needs to be displayed in a tightly streamlined manner on the page.

Using jQuery, we have 3 columns. The first step involves loading the images and then, after the onLoad event, moving the image to the shortest column.

However, working with angularJs presents challenges as cutting and rearranging items isn't as straightforward with angularJs.

One solution that has been devised is to store an array for each column and an array containing all the images. Each time an image is loaded, an event is sent to the controller which then selects the shortest column and places the image in its array. But I am facing difficulties implementing this in 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>

Check out this Pluker example for a full demonstration of how this problem can be solved.

javascript angularjs angularjs-directive

Answer 1

Answer №1

Hmtl:

<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();
      });
    });
  }
}

Live: http://jsbin.com/qunih/1/edit

Answer 2

Hmtl:

<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();
      });
    });
  }
}

Live: http://jsbin.com/qunih/1/edit

Answer 3

Answer №2

Navix, I want to express my gratitude for solving exactly what we needed.

This code snippet should be incorporated into the service method for loading pictures later on.

var pictureService = {
  images: [],
  columnsCount: 3,
  columns: [],
  initialize: initialize,
  initializeColumns: initializeColumns,
  addImages: addImages,
  addNextImage: addNextImage,
  findShortestColumn: findShortestColumn,
  updateSortableColumn: updateSortableColumn
};
return pictureService;

function addPictures(pictures) {
  pictureService.images = pictureService.images.concat(pictures);
  pictureService.addNextImage();
}

Plunker

This module can also be utilized for placing floating images of varying heights on different pages.

Answer 4

Navix, I want to express my gratitude for solving exactly what we needed.

This code snippet should be incorporated into the service method for loading pictures later on.

var pictureService = {
  images: [],
  columnsCount: 3,
  columns: [],
  initialize: initialize,
  initializeColumns: initializeColumns,
  addImages: addImages,
  addNextImage: addNextImage,
  findShortestColumn: findShortestColumn,
  updateSortableColumn: updateSortableColumn
};
return pictureService;

function addPictures(pictures) {
  pictureService.images = pictureService.images.concat(pictures);
  pictureService.addNextImage();
}

Plunker

This module can also be utilized for placing floating images of varying heights on different pages.

AngularJS allows for the creation of floating elements with various heights

Answer №1

Answer №2

Similar questions

Next JS encountered an error - Error [ERR_HTTP_HEADERS_SENT]: It is not possible to set headers after they have already been sent to the

Tips on ending socket connection for GraphQL subscription with Apollo

Creating an event emitter instance

How do I incorporate Spotify into my mobile app to enable seamless background music playback?

Guide to incorporating trading-vue-js into a Vue CLI project

The route seems to be downloading the page instead of properly rendering it for display

React component failing to update after receiving response from server for a specific room using socket.io-client with Python backend

PHP Form encountering error due to JSON decoding following an AJAX request

Leveraging an Angular directive callback to make updates to a bower package on a local

Experience real-time updates on webpages with Node.js and Socket.io

Minimize/Maximize Swagger Response Model Class View

Scroll-triggered Autoplay for YouTube Videos using JQuery

Utilizing a blank object as an argument for a conditional if statement in a loop

Paste a URL into the input field to view it on the current page

Decrease the height of a div element from the top with the use of jQuery

Can someone help me locate the file using the inspect element feature?

Mastering various mathematical operations in Vue.js

Issues arise in Ionic 3 when attempting to use scripts or external custom jQuery plugins within inner pages

Navigating boolean data extracted from JSON strings with angular expressions

Can you explain how to use a toggle switch to make a select dropdown select a random option?