jQuery-Wasserfall-Absolutpositionierungslayout (2) (verzögertes AJAX-Laden von Bildern)

Wasserfallfluss-Absolutpositionierungslayout, der Unterschied zum Floating-Layout ist

1. Das Layout ist anders:
Absolute Positionierung: Platzieren Sie alle absolut positionierten LIs in einem UL; Mehrere (normalerweise drei oder vier) ULs werden verteilt, um LI zu platzieren.
2 . Nehmen Sie dann die TOP- und LEFT-Einstellungen für dieses neu eingefügte LI vor.
Floating-Anordnung: Fügen Sie die angeforderten JSON-Daten (natürlich können es auch Daten in anderen Formaten sein) in das entsprechende UL ein, da es eine absolute Positionierung gibt, also keine Sie müssen die Position für LI festlegen. Es wird automatisch nach unten angeordnet.

1. Positionieren Sie jeden LI, dh legen Sie die OBEN- und LINKS-Werte jedes LI fest
2. AJAX-Daten konvertieren, in LI platziert, in UL eingefügt; 2. Implementierungsprozess:

1. LINKS von LI festlegen;
In welcher Spalte? Mit der Anzahl der Spalten multipliziert mit der Breite jedes LI können wir den LEFT-Wert bestimmen
Finden Sie das Muster:
Jetzt benötige ich drei Spalten, dann hat der LI in jeder Spalte eine gemeinsame Spaltennummer (selbst festlegen). 0.1.2 oder A.B.C, kurz gesagt, geben Sie diesen drei Spalten eine Bezeichnung) Hier setzen Sie es auf
　　Die erste Spalte von Nummer 0
　　Die zweite Spalte von Nummer 1
　　Die dritte Spalte von Nummer 2
　Für jede Reihe können also nur drei LIs platziert werden
Der erste LI ist bei Nr. 0, der zweite LI ist bei Nr. 1, der dritte LI ist bei Nr. 2
Der vierte LI ist bei Nr. 0, der fünfte LI ist bei Nr. 1 und der sechste LI ist bei Nr. 1, li ist bei Nr. 2
Wenn wir also an die Verwendung des Index Modulo denken, können wir genau 0 1 2, 0 1 erhalten 2...
Dadurch können wir beurteilen, in welcher Spalte sich LI befindet;
index%3 = 0 1 2, 0 1 2...
　Warum sollten wir a erhalten? Zyklus aus drei Zahlen. Wenn Sie also in Zukunft eine solche Schleife erhalten möchten, können Sie die Modulo-Operation in Betracht ziehen.
2. Legen Sie den Wert von TOP fest.
Da der Gesamthöhenwert jeder Spalte unterschiedlich ist. Daher müssen wir drei Variablen einrichten, um die Höhenwerte verschiedener Spalten zu speichern.
Warum müssen wir diesen Wert ermitteln?
1. Beim ersten Laden wird der TOP-Wert von LI basierend auf dem aktuellen Spaltenhöhenwert festgelegt.
2 Da die Daten LI nach der AJAX-Anfrage in den UL eingefügt werden sollen, ist dies der Fall Es ist notwendig, die aktuelle Gesamthöhe der aktuellen Spalte zu kennen und dann den neuen LI als TOP-Wert anzugeben. Tatsächlich gibt es in der Mitte viel zu sagen. Aber es ist zu lang. Auch die Kommentare in meinem Code sind klar geschrieben. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen, um mit mir zu kommunizieren. ! !
Eine Sache zu erwähnen ist, dass es viele ähnliche Funktionen enthält und ich sie zum einfachen Aufrufen in eine FUNKTION geschrieben habe. Beispielsweise können Sie OBEN und LINKS von LI festlegen, die Anzahl der Spalten von LI ermitteln und die Gesamthöhe der Spalten festlegen. Dies sind alles öffentliche und funktionale Blöcke, daher ist es besser, sie als separate Funktionen zu schreiben.


Weitere Artikel zum Thema jQuery-Wasserfallfluss-Absolutpositionierung (2) (Verzögertes AJAX-Laden von Bildern) finden Sie hier Achten Sie auf die chinesische PHP-Website!