ngFlowGrid

pinterest макет как адаптивная сетка изображений для приложения AngularJS без зависимости от jQuery;

Предварительный просмотр (снимок экрана.jpg «Предварительный просмотр ngFlowGrid»)

#Установка

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 (опция) Опции:

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

###getFlow (имя) Этот метод вернёт объект flowgrid, и вы сможете управлять этой сеткой через этот объект

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

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

• empty() : удаляет все элементы внутри столбцов