9

私は流体レイアウトプロジェクトに取り組んでいます。ドキュメントに高さ固定の DIV がいくつかありますが、高さがすべて異なります。ブラウザーのサイズ変更時に、これらの DIV の高さを比例的に変更する必要があります。これがマークアップです。

<body>
<div id="a" class="target"></div>
<div id="b" class="target"></div>
<div id="c" class="target"></div>
</body>

そして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>

簡単ですね！主な条件は、ターゲット DIV とその ID の正確な量がわからないことです。そのため、.each(function()) を使用しています。ここに私が書いたスクリプトがあります： 

$(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); 
});

});

このスクリプトは、ユーザーがページをリロードすると完全に機能します。ユーザーがリロードせずにブラウザのサイズを変更すると、どうすれば同じ結果を動的に得ることができますか? $(window).resize イベントリスナーを適用する必要があることはわかっています。しかし問題は、DIV の最初の高さがイベント内で計算され、結果がほぼ無限ループのようになることです。つまり、最終的な高さが大幅に増加または減少します。私はそれを必要としません！イベント関数の外側で各DIV の初期高さを計算し、イベント関数内でこれらの高さを使用するにはどうすればよいですか? それとも、同じ結果を得るための別のアプローチがあるのでしょうか?

4

4 に答える 4

14

各 div の元の高さを保存する必要があります。これを行うにはさまざまな方法があります。ここに 1 つのハックを示します。それを DOM ノード自体に格納します (より良い方法はありますが、これは迅速で汚いです)。

$(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);
  });
});
于 2012-06-16T17:45:39.803 に答える
2

サイズ変更機能をまとめて、ウィンドウサイズ変更イベントをサブスクライブします。

$(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); 
   });
}
于 2012-06-16T17:41:00.367 に答える
0

jqueryでバインドできるサイズ変更イベントを見てください

http://api.jquery.com/resize/

于 2012-06-16T17:40:59.243 に答える
0

.data を使用して、$.each 関数内に div の初期サイズを格納します

$(this).data('height', $(this).height());
$(this).data('width', $(this).width());

後でサイズ変更コールバック内で古いサイズを取得できます

var old_height = $(this).data('height');
var old_width = $(this).data('width');

お役に立てれば

于 2012-06-16T17:46:16.823 に答える