Wie erreicht Pinterest sein responsives Layout mit Div Stacking?

Wie sich das geniale Div-Stacking-Layout von Pinterest an verschiedene Browsergrößen anpasst

Das fesselnde visuelle Layout von Pinterest hat maßgeblich zu seinem Erfolg als soziales Netzwerk beigetragen Medienplattform. Ein wichtiger Aspekt dieses Layouts ist die Möglichkeit für die Spalten, ihre Anzahl anzupassen und vertikal zu stapeln, unabhängig von der Höhe benachbarter Spalten.

Hinter den Kulissen: Benutzerdefiniertes jQuery und CSS

Der Code der Website zeigt, dass dieses Layout durch absolute Div-Positionierung erreicht wird. Wie jedoch ein Mitbegründer von Quora feststellte, verwendet Pinterest angepasstes jQuery und CSS, um das Verhalten des Layouts zu steuern.

Der Layout-Blueprint

Das jQuery-Skript, genial entwickelt, basiert auf den folgenden Prinzipien:

1. Absolut Positionierung:Jeder Pin-Container ist absolut positioniert, was eine präzise Kontrolle über die Platzierung ermöglicht.
2. Berechnung der Spaltenbreite:Das Skript berechnet die Breite jeder Spalte basierend auf der Größe der übergeordneten Spalte Container und die gewünschte Anzahl von Spalten.
3. Rand zwischen Spalten: Es wird ein Bundstegwert definiert, der den Rand zwischen benachbarten Spalten darstellt Spalten.
4. Höhenarray: Es wird ein Array erstellt, um die Höhe jeder Spalte zu speichern, die zur Bestimmung der vertikalen Stapelung verwendet wird.
5. Durchschleifen Pins: Wenn neue Pins hinzugefügt werden, durchläuft das Skript jeden einzelnen und platziert ihn innerhalb der kürzesten Zeit Spalte.
6. Koordinaten festlegen: Die linke Position jedes Pins wird auf seinen jeweiligen Spaltenindex multipliziert mit der Spaltenbreite plus dem Zwischenraum festgelegt. Seine oberste Position entspricht der Höhe der kürzesten Spalte zu diesem Zeitpunkt.
7. Höhenanpassung: Nach dem Platzieren des Pins wird seine Höhe zur Höhe der ausgewählten Spalte im Array addiert.

Vorteile des benutzerdefinierten Layouts

Dieses benutzerdefinierte Layout bietet mehrere Vorteile:

• Responsiv: Das Layout passt sich automatisch an Änderungen der Browsergröße an und sorgt so für ein optimales Seherlebnis.
• Vertikales Stapeln: Unabhängig von benachbarten Säulenhöhen stapeln sich die Stifte vertikal und bilden so ein gitterartiges Bild Effekt.
• Effizienz: Das Skript ist äußerst effizient und reduziert die Zeit, die zum Layouten mehrerer Pins auf einer Seite benötigt wird.

Das obige ist der detaillierte Inhalt vonWie erreicht Pinterest sein responsives Layout mit Div Stacking?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!