AngularGrid库在某些特殊情况下会产生空格

Question

我正在使用角度网格在我的页面上实现类似Pintrest的流畅布局。一般来说，它工作得很好，但在特殊情况下，它会在我的页面上产生一个空白区域。似乎item7的位置计算不正确

我使用的是here的AngularGrid，我的代码与他们在documentation中推荐的代码非常相似，不同的是我在ng-repeat中使用的不是图像，而是一个自定义组件。所以看起来是这样的：

​

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>

​

有人能帮助解决这个问题吗？

Answer 1

好的。一些研究表明，这实际上是由每个项目内容的某些部分的css造成的：

​

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

​

相反，我现在在javascript中缩短字符串，如下所示：

​

var maxLength=100;
            if(self.project.description){
                if(self.project.description.length > maxLength) {
                    self.project.description = self.project.description.substring(0,maxLength-1)+"...";
                }
            }

​

一切都很好。以防其他人遇到这个问题...