Ich arbeite an einem Fluid-Layout-Projekt. Ich habe einige DIVs mit fester Höhe in meinem Dokument, und die Höhen sind für alle unterschiedlich. Ich muss diese DIVs Höhe auf Browserresize proportional ändern. Hier ist das Markup.
%Vor%Und css:
%Vor%Klingt einfach! Die Hauptbedingung ist, dass ich die genaue Anzahl der Ziel-DIVs und ihrer IDs nicht kenne , deshalb verwende ich .each (function ()). Hier ist ein Skript, das ich geschrieben habe:
%Vor%});
Dieses Skript funktioniert einwandfrei, wenn Benutzer die Seite neu laden. Wie kann ich die gleichen Ergebnisse dynamisch erhalten, wenn der Benutzer die Größe des Browsers ohne Neuladen ändert? Ich weiß, ich sollte $ (window) .resize Event Listener anwenden. Aber das Problem ist, dass die Anfangshöhe des DIV innerhalb des Ereignisses berechnet wird und das Ergebnis fast wie eine Endlosschleife sein wird - das heißt, die endgültige Höhe wird in einem großen Verlauf zunehmen oder abnehmen. Das brauche ich nicht! Wie kann ich jede DIV Anfangshöhenberechnung außerhalb der Ereignisfunktion machen und diese Höhen dann innerhalb der Ereignisfunktion verwenden? Oder gibt es einen anderen Ansatz, um das gleiche Ergebnis zu erhalten?
Sie müssen die ursprüngliche Höhe jedes Div speichern. Es gibt verschiedene Möglichkeiten, dies zu tun, hier ist ein Hack, speichern Sie es im DOM-Knoten selbst (es gibt bessere Möglichkeiten, aber das ist schnell und schmutzig).
%Vor%Verwenden Sie .data, um die anfängliche Größe des div in Ihrer $ .each-Funktion zu speichern
%Vor%Sie können später die alten Größen im resize-Callback abrufen
%Vor%Hoffe, das hilft
Tags und Links jquery height window-resize