replizieren Pinterests absolutes Div -Stapel -Layout

Pinterests einzigartiges Div -Layout stellt Programmierer eine Herausforderung dar, die versuchen, ihre Funktionalität zu replizieren. Die benutzerdefinierten JQuery und CSS, mit denen das Layout dynamisch auf der Größe der Browser -Größe anpasst und vertikale Stapelabhängigkeit verhindern kann, wundert sich viele, wie man ähnliche Ergebnisse erzielt. von jeder Kolumne.

Positionierung von PIN -Containern:

Jeder PIN -Container sollte absolut im Elternbehälter positioniert sein. Dies erlaubt, dass einzelne Pins unabhängig voneinander platziert werden.
Berechnung der Spalte und Rinnengrößen:

Bestimmen Sie die verfügbare Breite für Pin -Container und berechnen die Nummer der Spalten, die bequem passen. Verwenden Sie die resultierende Spaltenbreite und eine vordefinierte Dachrinnengröße, um die Gesamtlayout-Parameter zu berechnen.
Array-basierte Höhenverfolgung:

initialisieren Sie ein Array mit einer Länge, die der Nummer der Spalten entspricht. Bestimmen Sie, dass Sie in diesem Moment die kürzeste Höhe haben. Speichern Sie diese Höhe im entsprechenden Array -Element.
PIN Placement:

itererieren durch jeden Pin und:
4. positionieren Sie es in der Spalte mit dem kürzesten Height. multipliziert mit der Spaltenbreite und der Dachrinne.