I have implemented Angular grid to create a fluid layout of items on my page, similar to Pinterest. While it generally works well, I am encountering an issue where there is empty space in some cases because the position of item7 seems to be calculated incorrectly. https://i.sstatic.net/ZS62L.gif I am utilizing AngularGrid from this source. The code I am using closely follows their documentation, with the exception that instead of an image, I am using a custom component within ng-repeat, like this:
angular.module('app').controller('demo', demo);
function demo($rootScope, $scope, apiService, angularGridInstance) {
var self=this;
this.noOfProjects=8;
this.firstNo=0;
this.loadedProjects;
this.totalProjects;
apiService.searchProjects($rootScope.userId, self.noOfProjects, self.firstNo).then(function(response) {
console.log(response.data);
self.loadedProjects = response.data.matches;
self.totalProjects = response.data.header.totalCount;
console.log(self.loadedProjects);
$scope.pics=self.loadedProjects;
});
}.dynamic-grid{
position: relative;
}
.angular-grid > *{
opacity: 1;
}
.dynamic-grid.angular-grid{
display: block;
}
.grid {
position: absolute;
list-style: none;
background: #ffffff;
box-sizing: border-box;
-moz-box-sizing : border-box;
overflow: hidden;
}
.grid-img {
width: 100%;
vertical-align: middle;
background-color: #fff;
}
.grid-img.img-loaded{
visibility: visible;
opacity: 1;
}<div class="" data-ng-controller="demo">
<ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false" >
<li data-ng-repeat="project in pics" class="grid" data-ng-clock>
<project-info-min-grid project="project" class="grid-img" ></project-info-min-grid>
</li>
</ul>
</div>Seeking assistance for this issue. Any help would be appreciated.