When using an AngularJS ng-repeat, I encounter an issue with aligning elements on a new line. Instead of aligning the element above it, all elements on the same 'row' align with the lowest-hanging element.
Even though I am using Bootstrap, I couldn't figure out how to utilize the grid system for data that spans variable heights per column. Currently, all divs are floated left with a max-width and height: auto, creating a responsive grid but not respecting individual element placement per row.
For instance, in this grid the first element on the second 'row' (243 x 399) should be positioned a certain distance below the first element on the first 'row' (224 x 305), based on a specified margin. Similarly, 320 x 347 would have the corresponding offset from 344 x 246, and so forth.
I could achieve this behavior using Javascript or jQuery, but it seems like a hacky solution. I believe there must be a more idiomatic approach using CSS to achieve the desired layout.
var routeApp = angular.module('routerApp', []);
routeApp.controller('loadCtrl', ['$scope',
function($scope) {
$scope.tiles = [];
for (var i = 0; i < 10; i++) {
var d = Math.floor(Math.random() * (400 - 200 + 1)) + 200;
var e = Math.floor(Math.random() * (400 - 200 + 1)) + 200;
$scope.tiles.push("http://placehold.it/" + d.toString() + "x" + e.toString());
}
}
]);.tiles {
float: left;
max-width: 200px;
width: 100%;
height: auto;
margin: 5 auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="routerApp">
<div ng-controller="loadCtrl">
<div ng-repeat="til in tiles track by $index">
<a href="www.google.com"/>
<img class="tiles" ng-src="{{til}}"/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>