ngFlowGrid

Похожий на Pinterest отзывчивый макет сетки изображений для приложений AngularJS без зависимости от jQuery;

Установка

bower install ngFlowGrid#latest

1. Включите angularJS и ngFlowGrid в вашей странице:

<script src="path/angular.min.js"></script>
<script src="src/ngFlowGrid.js"></script>

2. Добавьте ngFlowGrid в зависимости вашего приложения:

var myApp = angular.module('myAppName', ['ngFlowGrid']);

3. Используйте директиву ngFlowGrid в вашем HTML коде:

<ul class="flowGrid" ng-flow-grid="homePageGrid" min-item-width="200">
	<li class="flowGridItem" ng-repeat="item in items">
		<a href=""><img ng-src="{{item.img}}"></a>
		<h2>{{item.description}}</h2>
	</li>
</ul>

4. Добавьте базовый CSS для форматирования макета

* { box-sizing: border-box; }
.flowGrid:before, .flowGrid:after {
	content: "";
	display: table;
}
.flowGrid:after {
	clear: both;
}
.flowGridItem { margin-bottom: 10px; }
.flowGridItem img { width: 100%; }
.flowGridColumn {
	float: left;
	padding-left: 10px;
}
.flowGridColumn:last-of-type {
	padding-right: 10px;
}

5. Контролируйте сетку в вашем контроллере:

app.controller('appCtrl', ['$scope', 'fgDelegate', function($scope, fgDelegate) {

	$scope.updateGrid = function() {
		var homePageGrid = fgDelegate.getFlow('homePageGrid');

		// затем вы можете:
		homePageGrid.minItemWidth += 20;
		homePageGrid.refill(true);
	}

}]);

Параметры директивы

ngFlowGrid

Назначьте имя для своей сетки, чтобы можно было контролировать несколько сеток на одной странице.

itemSelector (по умолчанию: '.flowGridItem')

minItemWidth (по умолчанию: 150)

Это значение влияет на количество колонок, чем меньше это число, тем больше колонок будет;# Сервис Через сервис fgDelegate вы можете получить объект потока и контролировать его в своем контроллере или директиве:

new(option)

Опции:

• container: контейнерный элемент.
• name: строка, имя новой сетки.
• itemSelector: строка.
• minItemWidth: число, это влияет на количество колонок в сетке;

getFlow(name)

Этот метод вернет объект flowgrid, и вы сможете контролировать эту сетку с помощью этого объекта:

• minItemWidth: число.
• container: элемент.
• autoCalculation: логическое значение.
• columnsHeights: массив.
• itemsHeights: объект.
• items: массив элементов.
• refill([forceRefill]): рассчитывает колонки на основе значения minItemWidth и помещает элементы в колонки; [forceRefill]: логическое значение.
• itemsChanged(): сообщает flow grid о добавлении или удалении элементов в вашем контроллере; перед вызовом этого метода убедитесь, что ngRepeat завершил отрисовку, поэтому следует вызывать его следующим образом:

    // Убедитесь, что ngRepeat завершил отрисовку
    $scope.$watch('$last', function() {
        fgDelegate.getFlow('demoGrid').itemsChanged();
    });

• empty(): удалить все элементы внутри колонок.