JSFiddle - React, Tailwind, and code Playground

by Per Ă…strand

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<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;
}

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);