0

ブラウザのサイズに応じて、3列のレイアウトから2列のレイアウトに縮小する必要があるページレイアウトがあります。また、jQuery組積造プラグインを使用して、ページ上のコンテナーのグリッドを適切に配置します。これはすべて、ウィンドウのサイズ変更で正常に機能します。

私が抱えている問題は、1100px未満のサイズでページをロードすると、jQueryを使用して「col2.css」スタイルシートが正しく呼び出されることですが、masonryプラグインは、ブラウザのサイズを手動で変更するまで、3列のレイアウトであると見なします。グリッドはまだcol3幅であり、コンテナのサイズから外れます。

jQueryがスタイルシートを選択した後、どういうわけか石積み関数を呼び出す必要があると思いますが、これを行う方法がわかりません。

私はこれを頭の中に持っています

<link href="<?=base_url()?>inc/css/col3.css" id="size-stylesheet" rel="stylesheet" type="text/css"  />

および次のJavaScript

    $(document).ready(function() {

        function adjustStyle(width) {
            width = parseInt(width);
            if (width < 1100) {
                $("#size-stylesheet").attr("href", "inc/css/col2.css");
            } else {
                $("#size-stylesheet").attr("href", "inc/css/col3.css"); 
            }
        }

        $(function() {
            adjustStyle($(this).width());
            $(window).resize(function() {
                adjustStyle($(this).width());
            });
        });

        //masonry       
        $(function(){
          $('#masonry').masonry({
            itemSelector : '.project',
            columnWidth : 365,
            isAnimated: true
          });
        });

    });

どんな助けでも大歓迎です！

4

1 に答える 1

1

まず、説明に基づいて。レスポンシブデザインアプローチを探している方がいいと思います。これは良い記事です：http：//www.alistapart.com/articles/sensitive-web-design/。これは、Cssを手動で切り替えることなく、問題を解決します。

次に、考えられる問題は、col2.cssに切り替える前に、col3.cssがロードされたときに組積造が適用されることです。したがって、できるだけ早くcol2.cssをロードする必要があります。これは、関連するコードをdocument.ready機能から外すことによって実行できます。

function adjustStyle(width) {
        width = parseInt(width);
        if (width < 1100) {
            $("#size-stylesheet").attr("href", "inc/css/col2.css");
        } else {
            $("#size-stylesheet").attr("href", "inc/css/col3.css"); 
        }
    }
//this runs when the page starts
$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});
//this runs when DOM is ready
$(document).ready(function() {
    //masonry       
      $('#masonry').masonry({
        itemSelector : '.project',
        columnWidth : 365,
        isAnimated: true
      });
});

第三に、これで問題が解決しない場合は、いつでも石積みをリロードして要素を並べ替えることができます。

$('#masonry').masonry('reload');
于 2012-07-23T11:25:30.100 に答える