javascript - AngularGrid 库在某些特殊情况下会产生空白

Question

我正在使用 Angular 网格在我的页面上实现类似 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)+"...";
                }
            }

一切正常。以防万一其他人遇到这个问题......