[Jquery] wie pinrest.coms absolutes div stacklayout repliziert wird


Answers

Ich habe das Pinterest-Skript geschrieben. Die IDs sind nicht mit dem Layout verknüpft und werden für andere mit der Interaktion zusammenhängende JS verwendet. Hier ist die Basis, wie es funktioniert:

Vorher:

  • Setzen Sie die Stiftbehälter unbedingt auf
  • Ermitteln Sie die Spaltenbreite
  • Bestimmen Sie den Abstand zwischen den Spalten (die Rinne)

Richten Sie ein Array ein:

  • Ruft die Breite des übergeordneten Containers ab. Berechnen Sie die Anzahl der Spalten, die passen
  • Erstellen Sie ein leeres Array mit einer Länge, die der Anzahl der Spalten entspricht. Verwenden Sie dieses Array, um die Höhe jeder Spalte beim Erstellen des Layouts zu speichern, z. B. wird die Höhe der Spalte 1 als Array [0] gespeichert.

Schleife durch jeden Pin:

  • Setzen Sie jeden Pin in der kürzesten Spalte in dem Moment, in dem er hinzugefügt wird
  • "left:" === die Spalte # (index array) mal die Spaltenbreite + margin
  • "top:" === Der Wert im Array (Höhe) für die kürzeste Spalte zu dieser Zeit
  • Fügen Sie schließlich die Höhe des Pins zur Spaltenhöhe hinzu (Array-Wert)

Das Ergebnis ist leicht. In Chrome dauert das Auslegen einer ganzen Seite mit mehr als 50 Pins <10 ms.

Question

Ich versuche Pinterest.com's div Layout zu replizieren, insbesondere wie sich die Anzahl der Spalten anpasst, um mehr / weniger an die Browsergröße anzupassen und das vertikale Stacking ist nicht abhängig von benachbarten Spaltenhöhen. Der Quellcode zeigt, dass jedes Div die absolute Position ist. Ein Mitgründer hat eine Quora-Post beantwortet, in der angegeben wird, dass sie mit benutzerdefiniertem jQuery und CSS gemacht wurde. Ich möchte, dass die Ergebnisse von links nach rechts sortiert werden. Jede mögliche Richtung, die Sie zur Verfügung stellen könnten, würde es sehr schätzen.







Nachdem ich alle Optionen untersucht hatte, implementierte ich das Layout, das Pinterest ähnlich ist:

Alle DIVs sind:

div.tile {
    display: inline-block;
    vertical-align: top;
}

Dadurch werden sie in Reihen besser positioniert als wenn sie schweben.

Wenn die Seite geladen ist, iteriere ich dann alle DIVs in JavaScript, um Lücken zwischen ihnen zu entfernen. Es funktioniert gut, wenn:

  1. Divs sind nicht sehr unterschiedlich in der Höhe.
  2. Es macht dir nichts aus, wenn du ein paar kleinere Verstöße gegen die Bestellung hast (einige Elemente, die unten stehen, können oben angezeigt werden).
  3. Es macht dir nichts aus, dass die Grundlinie von unterschiedlicher Höhe ist.

Der Vorteil dieses Ansatzes - Ihr HTML ist für Suchmaschinen sinnvoll, kann mit JavaScript funktionieren, das durch die Firewall deaktiviert / blockiert wird, die Reihenfolge der Elemente in HTML entspricht der logischen Reihenfolge (die neueren Elemente vor älteren)