2

ページの下部に常にベースラインを表示する Web サイトのベースライン グリッドを作成したいと考えています。

私がしていることは、css によってスタイル設定された 1 つの初期ベースラインを作成することです。

<figure id="lines">
    <div class='base-line bl1'></div>
</figure>

そして、ドキュメントの一番下に到達するまで、新しいものを作成します。

<script type="text/javascript">
        $(document).ready(function() {
            var diff = Math.floor( $('body').height() / $('.base-line').height() );
            for ( var i = 1; i <= diff; i++ )
                $('#lines').append("<div class='base-line bl" + i + "'></div>");
        });
    </script>

ただし、ページのサイズを変更すると (高さを減らすなど)、ベースラインが残ります。また、ドキュメントの高さを動的に増やすと (メディア クエリで値を変更するなど)、ベースラインがページの下部に達しません。

サイズ変更時にベースラインを追加および削除するサイズ変更ハンドラを正しくすることは可能ですか? base-lineサイズ変更ごとにすべての を削除し、サイズ変更状態ごとにすべてを描画すると、かなりパフォーマンスが低下すると思います。

それに関するアイデアはありますか？

4

2 に答える 2

0

これがベースラインを作成する関数であると仮定します

function addBaseLines(){
    $('#lines').clear();
    var diff = Math.floor( $('body').height() / $('.base-line').height() );
    for ( var i = 1; i <= diff; i++ ){
       append("<div class='base-line bl" + i + "'></div>");
    }
}

あなたはこれを行うことができます

var timeout = null;

$(window).resize(function(){
    if (timeout!=null){
        clearTimeout(timeout);
    }
    timeout = setTimeout( addBaseLines, 1000); // only do when the user is "done" 

});

JSFiddleで見る

タイムアウトを使用すると、パフォーマンスは悪くありません...

パフォーマンスを向上させるには、見えないものを削除するだけですが、それほど重要ではないと思います

于 2012-05-09T18:47:42.717 に答える
0

まあ、あなたはできます、

$(window).resize(function(){
   var height = $(window).height();  /*or width*/
   var min = 500; //for example
   if(height < min){
      $('.base-line').hide();
   }else{
      $('.base-line').show();
   }
});

しかし、非表示/表示または削除/追加するかどうかはわかりません（最初に行います）

于 2012-05-09T18:11:49.037 に答える