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

[Ole]

Hi

Nun zu meiner Frage: Wie bekomme ich per Javascript raus, wie viele Divs in einer "Zeile" angezeigt werden?

Du weißt und/oder kannst ermitteln wie breit die Vorschaubilder sind und wie breit der umgebende Container ist.

Das wäre, in Pseudocode gesprochen, sowas wie floor(containter-breite/teaser-breite), um die Anzahl pro Reihe zu bekommen.

Gruß
Ole

[misterunknown]

Moin,

Das wäre, in Pseudocode gesprochen, sowas wie floor(containter-breite/teaser-breite), um die Anzahl pro Reihe zu bekommen.

Das habe ich mir auch gedacht. Leider funktioniert das nicht zuverlässig; zumindest nicht im Chrome und FF. Ich habe folgende Berechnung aufgestellt:

var inRow = Math.floor($('#grid').offsetWidth / $('#grid div').offsetWidth);  

Wenn du auf die Seite gehst, und selbiges in die Dev-Console eingibst ist der Wert meistens um 1 erhöht. Das merkt man vor allem, wenn das Browserfenster gerade so groß ist, dass eben nicht 7, sondern nur 6 Bilder in eine Reihe passen.

Ich habe auch versucht, diese mir unbegreifliche Unschärfe zu korrigieren. Aber sie ist immer unterschiedlich:

- Es werden 6 Bilder angezeigt und es fehlt nur 1 Pixel, damit das 7. Bild mit hoch springt:

$('#grid').offsetWidth / $('#grid div').offsetWidth => 7.43125

- Es werden 5 Bilder angezeigt und es fehlt nur 1 Pixel, damit das 6. Bild mit hoch springt:

$('#grid').offsetWidth / $('#grid div').offsetWidth => 6.36875

Kann sich jemand erklären, wo diese Abweichung herkommt?

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

Wenn du auf die Seite gehst,

… würde ich #grid { text-align: center; } geben und mit JavaScript alle n+1 Abstände in einer Zeile vermitteln.

Matthias

[misterunknown]

Moin,

… würde ich #grid { text-align: center; } geben

Ja, so sieht es besser aus. Wenn es fertig ist, sollen sowieso noch ein paar Feinheiten gestylt werden. Auch die View, die sich öffnet, wenn man auf die Bilder klickt.

und mit JavaScript alle n+1 Abstände in einer Zeile vermitteln.

Das verstehe ich nicht recht. Wie meinst du das?

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

und mit JavaScript alle n+1 Abstände in einer Zeile vermitteln.

Das verstehe ich nicht recht. Wie meinst du das?

Zwischen n Bildern gibt es n-1 Lücken. Dazu kommt der ganz linke und der ganz rechte Abstand. (Zwischen n+1 Lücken passen n Bilder.) Alle diese Abstände würde ich gleich breit machen.

Matthias

[misterunknown]

Moin,

Zwischen n Bildern gibt es n-1 Lücken. Dazu kommt der ganz linke und der ganz rechte Abstand. (Zwischen n+1 Lücken passen n Bilder.) Alle diese Abstände würde ich gleich breit machen.

Jetzt hab ichs verstanden ;) Das werd ich implementieren, wenn ich das mit dem Scrollen hingekriegt habe.

Grüße Marco

[molily]

Hallo,

offsetWidth beinhaltet Margins nicht.

Mathias

[misterunknown]

Moin,

offsetWidth beinhaltet Margins nicht.

Stimmt, das wars. Wenn ich den Margin-Wert addiere ist alles korrekt. Danke!

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

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?

Vielleicht lädst du soviele nach, wie innerhalb des Viewports sind?

Matthias

[misterunknown]

Moin,

Vielleicht lädst du soviele nach, wie innerhalb des Viewports sind?

Stimmt, vielleicht ist das sogar die bessere Möglichkeit. Ich habe das in eine separate Funktion ausgelagert, sodass ich die Berechnung, wie viele neue Bilder kommen sollen, jederzeit ändern kann.

Grüße Marco

[misterunknown]

Moin,

Danke erstmal für eure antworten.

Ich habe jetzt folgendes Problem: ich möchte das "unendliche Scrollen" so gestalten, wie es in diesem jsFiddle beschrieben ist. Leider funktioniert das bei mir nicht (ich bin absoluter Neuling im Bezug auf AngularJS).

Das Modul scroll habe ich 1:1 implementiert. Allerdings ist mir nicht ganz klar, warum die Direktive in der Definition whenScrolled heißt, im Markup aber when-scrolled.
In der Index-Datei ist die Moduldatei auch korrekt eingebunden, außerdem hat mein Hauptmodul eine Referenz bekommen:

var wtflol = angular.module('wtflol', ['ngRoute', 'ngAnimate', 'scroll']);  
                                                                   ↑

In der View gibt es die Direktive ...

<div id="grid" when-scrolled="loadMore()">  

... und im Controller ist die Funktion auch definiert (Zeile 16). Dort wird auch geloggt, wenn die Funktion aufgerufen wird. Dazu kommt es aber gar nicht.

Grüße Marco