javascript - 查找 ng-repeat 生成的列数

Question

我有一个 div，我在上面使用了 ng-repeat。它以网格形式显示照片列表。这都是非常简单的事情并且工作正常。

我需要在网格内的项目上添加文件浏览器，例如导航。最简单的方法是知道一行的长度(行中的项目数)，然后进行简单的数学计算，根据按下的键来计算将选择移动到哪里。

我遇到的问题是找出线的长度。这可行吗？

编辑:

<div class="images-cq__item" ng-repeat="photo in displayedPhotos">
    <div ng-class="{active: photo.selected}" id="{{photo.uuid}}" ng-click="selectionEvent({value: photo.uuid, event: $event, index: $index})">
    <div class="images-cq-statut" ng-show="photo.statusCQ != 'none'">
        {{photo.statusCQ}}
    </div>
    <div class="img-cq">
        <img ng-src="{{photo.thumbPath100}}" alt="Alternate Text" />
        <a href="#" class="zoom-cq" title="zoom" ng-click="zoomOpen({value: $index, event: $event})">zoom</a>
    </div>
    <p>
        {{photo.title}}
    </p>
    <ul class="images-cq-tags">
        <li id="{{photo.uuid}}.{{tag.value}}" ng-repeat="tag in tags" style="display:none">
            <span>{{tag.name}}</span>
        </li>
    </ul>
</div>

displayedPhotos 是一个简单的数组，其中包含从服务器获取的照片对象。它包含几个链接(缩略图、原始链接)和一些其他信息，但我认为它与本例无关。

Answer 1

This这就是我得到的:

JavaScript

var items = $(".images-cq__item");
var previousTop = null;
var itemsPerRow = 0;

for(var i = 0; i < items.length;i++){
  var item = items.eq(i);
  var offset = item.offset();
  var top = offset.top;

  if(!previousTop || (top == previousTop)){
    previousTop = top;
    itemsPerRow++;
  } else{
    break;
  }
}

console.log(itemsPerRow); // 3

HTML

<div class="container">
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
</div>

CSS

.container{
  width: 400px;
}

.images-cq__item{
  width: 120px;
  height: 120px;
  background: green;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
}