Angularjs上具有不同高度的浮動單元

不同高度和恆定寬度的圖片陣列。必須填寫頁面，以便它們彼此緊密合並。Angularjs上具有不同高度的浮動單元

在jQuery上如此。有3列。第一步是加載圖像，在事件onLoad之後，下一步 - 將圖像移動到最低列。

但是angularJs會造成困難，切割和混合物品在做angularJs方面不太好。

設計的解決方案之一。存儲在數組的每一列和一列所有圖片的數組中。每個單獨加載圖片的字段，將事件發送到頂部，控制器必須選擇最低的列並將圖像粘貼到其陣列中。但是我有執行這個問題上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

來源

2014-09-26 Виктор Бондаренко

請張貼一些代碼，你有什麼試過？ – 2014-09-26 09:50:11

我添加了一個鏈接到Punker，有一個完整的工作示例。如果你能幫助做更好的事情，我會非常感激。 – 2014-09-26 15:30:00

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

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

來源

2014-09-27 09:53:39 Navix

非常感謝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

並且該模塊可在不同高度的浮動圖片的網頁被重新用於安置。

來源

2014-09-27 18:33:31

Angularjs上具有不同高度的浮動單元

回答

相關問題