/Responsive Grid Layout With Famous-Angular.markdown

## index.html
<html>
  <body ng-app="App">
    <fa-app class="full-screen" ng-controller="MainCtrl">
      <fa-scroll-view fa-pipe-from="scrollHandler">
        <fa-modifier fa-size="getScrollerSize()">
          <fa-container-surface fa-pipe-to="scrollHandler">
            <fa-grid-layout fa-options="getGridOptions()">
              <fa-view ng-repeat="brick in bricks">
                <fa-modifier fa-size="getBrickSize()" fa-origin="[.5, .5]" fa-align="[.5, .5]">
                  <fa-surface fa-background-color="brick.color">
                  </fa-surface>
                </fa-modifier>
              </fa-view>
            </fa-grid-layout>
          </fa-container-surface>
      </fa-scroll-view>
    </fa-app>
  </body>
</html>

## Responsive Grid Layout With Famous-Angular.markdown

      
    Raw
  

              Responsive Grid Layout With Famous-Angular.markdown
            
          
    Responsive Grid Layout With Famous-Angular
('-' * 42)
An example shows how to implement responsive grid layout by built-in fa-grid-layout with famous-angular.
A Pen by Johnson Chou on CodePen.
License.

  
## script.js
var app = angular.module('App', ['famous.angular']);

app.controller('MainCtrl', [
  '$scope',
  '$famous',
  '$window',
  function ($scope, $famous, $window) {
    var Engine = $famous['famous/core/Engine'];
    var EventHandler = $famous['famous/core/EventHandler'];

    var _brickNum  = 100;
    var _dimensions = _calcDims($window.innerWidth);
    var _brickSize = [250, 250];

    $scope.scrollHandler = new EventHandler();

    Engine.on('resize', function () {
      _dimensions = _calcDims($window.innerWidth)
      $scope.$digest();
    });

    function _calcColNum(width) {
      if (width < 768)
        return 1;
      else if (width > 769 && width < 1023)
        return 3;
      else
        return 4;
    }

    function _calcDims(width) {
      var _colNum = _calcColNum(width);
      var _rowNum = _brickNum / _colNum;
      return [_colNum, _rowNum];
    }

    $scope.bricks = [];
    for (var i = 0; i < _brickNum; i++) {
      $scope.bricks[i] = {
        color: 'hsl(' + (i * 40) + ', 60%, 50%)'
      };
    }

    $scope.getBrickSize = function () {
      return _brickSize;
    };

    $scope.getGridOptions = function () {
      return {
        dimensions: _dimensions
      };
    };

    $scope.getScrollerSize = function () {
      var _height = (_brickSize[1] + 50) * _dimensions[1];
      return [undefined, _height];
    };
  }
])

## style.css
.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
	<html>
	<body ng-app="App">
	<fa-app class="full-screen" ng-controller="MainCtrl">
	<fa-scroll-view fa-pipe-from="scrollHandler">
	<fa-modifier fa-size="getScrollerSize()">
	<fa-container-surface fa-pipe-to="scrollHandler">
	<fa-grid-layout fa-options="getGridOptions()">
	<fa-view ng-repeat="brick in bricks">
	<fa-modifier fa-size="getBrickSize()" fa-origin="[.5, .5]" fa-align="[.5, .5]">
	<fa-surface fa-background-color="brick.color">
	</fa-surface>
	</fa-modifier>
	</fa-view>
	</fa-grid-layout>
	</fa-container-surface>
	</fa-scroll-view>
	</fa-app>
	</body>
	</html>
	var app = angular.module('App', ['famous.angular']);

	app.controller('MainCtrl', [
	'$scope',
	'$famous',
	'$window',
	function ($scope, $famous, $window) {
	var Engine = $famous['famous/core/Engine'];
	var EventHandler = $famous['famous/core/EventHandler'];

	var _brickNum = 100;
	var _dimensions = _calcDims($window.innerWidth);
	var _brickSize = [250, 250];

	$scope.scrollHandler = new EventHandler();

	Engine.on('resize', function () {
	_dimensions = _calcDims($window.innerWidth)
	$scope.$digest();
	});

	function _calcColNum(width) {
	if (width < 768)
	return 1;
	else if (width > 769 && width < 1023)
	return 3;
	else
	return 4;
	}

	function _calcDims(width) {
	var _colNum = _calcColNum(width);
	var _rowNum = _brickNum / _colNum;
	return [_colNum, _rowNum];
	}

	$scope.bricks = [];
	for (var i = 0; i < _brickNum; i++) {
	$scope.bricks[i] = {
	color: 'hsl(' + (i * 40) + ', 60%, 50%)'
	};
	}

	$scope.getBrickSize = function () {
	return _brickSize;
	};

	$scope.getGridOptions = function () {
	return {
	dimensions: _dimensions
	};
	};

	$scope.getScrollerSize = function () {
	var _height = (_brickSize[1] + 50) * _dimensions[1];
	return [undefined, _height];
	};
	}
	])
	.full-screen {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	}