Anzahl von Inline-Blocks in "Zeile"

[misterunknown]

Moin,

ich möchte eine Bildergallerie mit dem Javascript-Framework AngularJS bauen. Die Bilder werden auf der Startseite als kleine Vorschaubilder in einer View angezeigt:

<div id="grid">  
   <div  
       data-ng-repeat="pic in pics"  
       style="background-image: url('{{ pic.filename }}');"  
       class="{{ pic.format }}"  
       data-ng-click="go('/singlePic/{{ pic.uid }}')"  
   ></div>  
</div>

Diese sich wiederholenden Divs sind Inline-Blöcke:

#grid div {  
	display: inline-block;  
	width: 10em;  
	height: 10em;  
	overflow: hidden;  
	margin: 5px;  
	border-radius: 5px;  
	border: 1px solid #FFF;  
}  
  
#grid div.wide {  
	background-size: auto 100%;  
	background-position: center;  
}  
#grid div.tall {  
	background-size: 100% auto;  
	background-position: center;  
}

Nun möchte ich, dass beim Scrollen dynamisch weitere Bilder geladen werden. Durch das Data-Binding von Angular ist das kein Problem, allerdings weiß ich nicht wie viele Bilder ich nachladen lassen soll, und ob es nicht sinnvoll ist, diese Anzahl vom Viewport abhängig zu machen.
Grundsätzlich will ich ca. 4-5 "Zeilen" an Bildern nachladen. Das sollte für alle stationären und mobilen Endgeräte in Ordnung sein.

Nun zu meiner Frage: Wie bekomme ich per Javascript raus, wie viele Divs in einer "Zeile" angezeigt werden? Da die Seite responsive ist (bzw. werden soll; das Styling ist erstmal Nebensache), kann sich dieser Wert auch während der Ausführung ändern. Gibt es da eine Möglichkeit? Oder habt ihr vielleicht eine andere Idee?

Grüße Marco