Wie repliziere ich das responsive Div-Stacking-Layout von Pinterest?

Replikation des absoluten Div-Stacking-Layouts von Pinterest

Das einzigartige Div-Layout von Pinterest stellt eine Herausforderung für Programmierer dar, die seine Funktionalität nachbilden möchten. Das benutzerdefinierte jQuery und CSS, das verwendet wird, um das Layout basierend auf der Größenänderung des Browsers dynamisch anzupassen und vertikale Stapelabhängigkeit zu verhindern, lässt viele fragen, wie sie ähnliche Ergebnisse erzielen können.

Antwort:

Die Das Kernprinzip des Pinterest-Layouts besteht darin, die Pin-Container genau zu positionieren, die Spaltenbreite und die Steggröße zu bestimmen und ein Array zu verwenden, um die Höhe jedes einzelnen Containers zu verfolgen Spalte.

1. Pin-Container positionieren:

Jeder Pin-Container sollte absolut innerhalb des übergeordneten Containers positioniert sein. Dadurch können einzelne Pins unabhängig voneinander platziert werden.

2. Berechnung der Spalten- und Rinnengrößen:

Bestimmen Sie die verfügbare Breite für Pin-Container und Berechnen Sie die Anzahl der Spalten, die bequem hineinpassen. Verwenden Sie die resultierende Spaltenbreite und eine vordefinierte Steggröße, um die Gesamtlayoutparameter zu berechnen.

3. Array-basierte Höhenverfolgung:

Initialisieren Sie ein Array mit einer Länge, die der Anzahl der Spalten entspricht. Bestimmen Sie beim Durchlaufen der einzelnen Pins, welche Spalte zu diesem Zeitpunkt die kürzeste Höhe hat. Speichern Sie diese Höhe im entsprechenden Array-Element.

4. Pin-Platzierung:

Durchlaufen Sie jeden Pin und:

• Positionieren Sie es innerhalb der Spalte mit der kürzesten Höhe (bestimmt durch das Array).
• Setzen Sie die CSS-Eigenschaft „left“ auf die Spalte Index multipliziert mit der Spaltenbreite und dem Bundsteg.
• Setzen Sie die CSS-Eigenschaft „top“ auf die Höhe, die im Array für die ausgewählte Spalte gespeichert ist.
• Aktualisieren Sie die Spaltenhöhe (Array-Wert) durch Hinzufügen die Höhe des Pins dazu.

Durch die Einhaltung dieser Schritte ist es möglich, ein Layout zu erstellen, das das Reaktionsverhalten und die effiziente Pin-Platzierung von Pinterest nachahmt Algorithmus.

Das obige ist der detaillierte Inhalt vonWie repliziere ich das responsive Div-Stacking-Layout von Pinterest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!