Ich arbeite an einem fließenden Layoutprojekt. Ich habe in meinem Dokument einige DIVs mit fester Höhe, und die Höhen sind für alle unterschiedlich. Ich muss diese DIVs proportional zur Browsergröße ändern. Hier ist das Markup.
<body>
<div id="a" class="target"></div>
<div id="b" class="target"></div>
<div id="c" class="target"></div>
</body>
Und css:
<style>
body { width: 90%; margin: 0 auto;}
.target { width:30%; float:left; margin:1.6%; cursor:pointer; }
#a { height: 200px; background-color: yellow;}
#b { height: 400px; background-color: green;}
#c { height: 600px; background-color: grey;}
</style>
Klingt einfach! Die Hauptbedingung ist, dass ich die genaue Anzahl der Ziel-DIVs und ihre IDs nicht kennt, deshalb verwende ich .each (function ()). Hier ist ein Skript, das ich geschrieben habe:
$(document).ready(function(){
//set the initial body width
var originalWidth = 1000;
/*I need to go through all target divs because i don't know
how many divs are here and what are their initial height*/
$(".target").each(function()
{
//get the initial height of every div
var originalHeight = $(this).height();
//get the new body width
var bodyWidth = $("body").width();
//get the difference in width, needed for hight calculation
var widthDiff = bodyWidth - originalWidth;
//new hight based on initial div height
var newHeight = originalHeight + (widthDiff / 10);
//sets the different height for every needed div
$(this).css("height", newHeight);
});
});
Dieses Skript funktioniert perfekt, wenn der Benutzer die Seite neu lädt. Wie kann ich dinamisch dieselben Ergebnisse erzielen, wenn der Benutzer die Browsergröße ändert, ohne neu zu laden? Ich weiß, dass ich $ (window) .resize-Ereignislistener anwenden sollte. Das Problem ist jedoch, dass die anfängliche Höhe von DIV innerhalb des Ereignisses berechnet wird und das Ergebnis fast wie eine Endlosschleife aussieht. Dies bedeutet, dass die endgültige Höhe bei einem großen Fortschritt zunimmt oder abnimmt. Ich brauche das nicht! Wie kann ich each DIV anfängliche Höhenberechnung außerhalb der Ereignisfunktion erstellen und dann diese Höhen innerhalb der Ereignisfunktion verwenden? Oder gibt es vielleicht einen anderen Ansatz, um das gleiche Ergebnis zu erzielen?
Sie müssen die ursprüngliche Höhe jedes Divs 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).
$(document).ready(function(){
//set the initial body width
var originalWidth = 1000;
/*I need to go through all target divs because i don't know
how many divs are here and what are their initial height*/
function resize() {
//This will only set this._originalHeight once
this._originalHeight = this._originalHeight || $(this).height();
//get the new body width
var bodyWidth = $("body").width();
//get the difference in width, needed for hight calculation
var widthDiff = bodyWidth - originalWidth;
//new hight based on initial div height
var newHeight = this._originalHeight + (widthDiff / 10);
//sets the different height for every needed div
$(this).css("height", newHeight);
}
$(".target").each(resize);
$(document).resize(function(){
$(".target").each(resize);
});
});
Bauen Sie Ihre Größenänderungsfunktion zusammen und abonnieren Sie das Fenster zur Größenänderung.
$(document).ready(function(){
//set the initial body width
var originalWidth = 1000;
resizeTargets();
$(window).resize(resizeTargets);
});
function resizeTargets()
{
$(".target").each(function()
{
//get the initial height of every div
var originalHeight = $(this).height();
//get the new body width
var bodyWidth = $("body").width();
//get the difference in width, needed for hight calculation
var widthDiff = bodyWidth - originalWidth;
//new hight based on initial div height
var newHeight = originalHeight + (widthDiff / 10);
//sets the different height for every needed div
$(this).css("height", newHeight);
});
}
werfen Sie einen Blick auf das Größenänderungsereignis, das Sie mit Jquery binden können
verwenden Sie .data, um die ursprüngliche Größe des div in Ihrer $ .each-Funktion zu speichern
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
sie können die alten Größen später im Callback für die Größenänderung abrufen
var old_height = $(this).data('height');
var old_width = $(this).data('width');
Hoffe das hilft