5

私はこれまで何度もChrisCoyiersEqual Height Blocks in Rows jQueryスクリプトを使用してきましたが、常にうまく機能しています。

そうは言っても、私は常に特定の解像度のために構築されたWebサイトを開発してきました。今回はレスポンシブウェブサイトを開発していて、メインコンテナの幅は流動的です。そのため、問題が発生し、問題の解決策を見つけることができません。

クリスは彼の投稿で、流体の幅について次のように述べています。

流体の幅はどうですか？このためにテーブルを使用しない主なポイントの1つは、フロートdivが、使用可能な水平方向のスペースに基づいて自分自身を再配置できることです。これは、流体の幅に適しています。上記のコードを調整して、それに対処することもできます。基本的に、これを初めて実行するときは、各ブロックの高さを測定し、jQueryのdata（）メソッドでそれを記憶します。次に、ウィンドウのサイズが変更されたら、コードを再度実行しますが、新しいサイズではなく、元のサイズを使用して行を調整します。

彼は特に流体幅のコンテナを参照していることに注意してください。私の場合、それはコンテナだけでなく、流体の幅も持つ子要素です。イコライズする必要のあるブロックは、同じブロックが流動的な幅を持ち、ウィンドウ/コンテナの解像度に合わせて調整する必要があります。

要素の「originalHeight」はコンテナのサイズによって変化するため、スクリプトは正しく機能しなくなると思います。

私の推測は間違っているかもしれませんが、何らかの形でこれは流体幅の要素では機能していません。助けを探しています！

もちろん、これが問題を示すために作成したjsfiddleです。ウィンドウの幅のサイズを変更するだけで、コンテナの高さが更新されないことがわかります。

次のコードを実行して、ウィンドウのサイズ変更イベントで関数を呼び出します。

$(window).resize(function() {
    columnConform();
});

前もって感謝します

4

2 に答える 2

6

1 つの行に存在する列の高さを均等にするだけなので、すべての JS をこれに置き換えることができます

$.fn.extend({
    equalHeights: function(options){
      var ah=(Math.max.apply(null, $(this).map(function(){ return $(this).height(); }).get()));
      if (typeof ah=='number') $(this).height(ah);
    }
 });

そしてそのように実行します

$(document).ready(function() {
    $(window).resize(function() {
        $('.equalize').equalHeights();
    }).trigger('resize'); // don't write code twice just to execute on page load - trigger the event you just bound to instead

})

しかし、疑似行の作業デモごとにやりたい場合 

<ul class="eqme">
  <li><h1>One</h1></li>
  <li><h2>Two</h2></li>
  ....
</ul>

JS

$.fn.extend({
equalHeights: function(){
    var top=0;
    var classname=('equalHeights'+Math.random()).replace('.','');
    $(this).each(function(){
      if ($(this).is(':visible')){
        var thistop=$(this).offset().top;
        if (thistop>top) {
            $('.'+classname).removeClass(classname); 
            top=thistop;
        }
        $(this).addClass(classname);
        $(this).height('auto');
        var h=(Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get()));
        $('.'+classname).height(h);
      }
    }).removeClass(classname); 
}       

});

$(function(){
  $(window).resize(function(){
    $('.eqme li').equalHeights();
  }).trigger('resize');
});

これにより、同じ親の子である多くの要素が行を分割したとしても処理されます。たとえば、1 行に 10 個しか収まらない場合や、サイズ変更時にul100 個の要素が含まれている場合、または幅が静的であるがページ幅がそうでない場合などです。ウィンドウが縮小されると (または、幅を拡大する場合は上の行に戻る)、新しい行にクリアされ、高さは疑似行ごとに最も高いものに合わせて修正されます。lili

ノート：

フィードバックによると、一部の状況outerHeight()よりもうまく機能することが示唆されています。.height()

本番環境では、window.resize 関数内で、サイズの変更に反応する前に 100ms の clearTimeout と setTimeout を追加して、コーナーをドラッグしてサイズ変更するときの速度低下を防ぎました。

于 2013-01-05T00:54:44.197 に答える
2

あなたの質問を理解したと仮定すると、このコードは機能するはずです:

$(document).ready(function() {

    $(window).on('resize', function() {
        $('.equalize').css('height', highest($('p')));
    }).trigger('resize');

});

function highest(el) {
    var highest = 0;
    el.each(function() {
        var height = $(this).height();
        if(height > highest) {
          highest = height;
        }
    });
    return highest;   
}

フィドル

于 2013-01-05T01:23:31.490 に答える