Wie erreicht Pinterest sein dynamisches Rasterlayout mit absoluter Positionierung?

Absolutes Div-Stacking-Layout: Das Geheimnis von Pinterest lüften

Pinterests fesselndes Rasterlayout wurde von vielen Entwicklern inspiriert, repliziert aber seine nahtlose Spaltenanpassung und Die vertikale Stapelung stellt eine Herausforderung dar. Hier ist ein tiefer Einblick in die Vorgehensweise, basierend auf einer Quora-Enthüllung von einem der Mitbegründer von Pinterest:

Absolute Positionierung und benutzerdefiniertes Scripting

Jeder Div-Container im Pinterest-Layout ist absolut positioniert und ermöglicht so eine präzise Kontrolle über seine Platzierung. Der Schlüssel liegt in einem benutzerdefinierten jQuery- und CSS-Skript, das das dynamische Verhalten des Layouts orchestriert.

Berechnung der Spalten- und Bundstegabmessungen

Vor der Positionierung der Divs bestimmt das Skript die Spalte Breite und der Rand oder „Rinne“ zwischen den Spalten. Diese Werte beeinflussen die Anzahl der Spalten, die auf die Seite passen.

Höhenverfolgung mit Spaltenarrays

Es wird ein Array erstellt, um die Höhen jeder Spalte zu speichern. Bei der Berechnung der „oberen“ Position für ein neues Div identifiziert das Skript die kürzeste Spalte (die mit dem kleinsten Höhenwert im Array) und platziert das Div dort.

Dynamische Positionierung und Höhenanpassung

Die Position „links“ wird anhand der Spaltennummer und der Spaltenbreite plus Rand berechnet. Die „obere“ Position wird durch die Höhe der jeweils kürzesten Spalte bestimmt. Wenn Divs hinzugefügt werden, aktualisiert das Skript den Höhenwert der entsprechenden Spalte, um die neue Höhe widerzuspiegeln.

Leicht und reaktionsfähig

Dieser Ansatz führt zu einem äußerst reaktionsfähigen Layout das sich effizient an die Größenänderung des Browsers und unterschiedliche Bildschirmgrößen anpasst. Das Skript ist trotz seiner Komplexität leichtgewichtig und verarbeitet Seitenlayouts mit zahlreichen Pins in weniger als 10 Millisekunden.

Durch das Verständnis des komplexen Zusammenspiels von absoluter Positionierung und benutzerdefiniertem Skripting können Entwickler dynamische und flexible Layouts erstellen, die optisch denen von Pinterest ähneln ansprechendes Raster.

Das obige ist der detaillierte Inhalt vonWie erreicht Pinterest sein dynamisches Rasterlayout mit absoluter Positionierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!