2

columnizer jQuery プラグインを使用して、コンテンツを列に分割しています。私のウェブサイトはレスポンシブで、流動的な幅のコンテナがあることに注意してください。CSSメディアクエリが機能するのと同じように、ウィンドウの最小画面解像度に基づいてさまざまなjavascriptを呼び出してきました。

minscreen はさまざまなブレークポイントとして機能します。関数のオプションで定義される列の数を変更するために使用したいと思いますcolumnize()。

これは、ブレークポイントを作成するために使用している関数の 1 つです。

/* Min Screen 480
----------------------------------------------------------------*/
function minScreen480(){
    document.body.style.overflow = "hidden";
        if ($(window).width() >= 480) {
            // Set stuff here
        }else{
            // Remove stuff here
        }
    document.body.style.overflow = "";
}

window.resize次に、次のように関数を実行します。

$(window).resize(function(){
    minScreen480();
}).trigger('resize');

そして、ここに columnize 関数自体があります:

$('.element').columnize({ columns: 2, lastNeverTallest: true });

考えられることはすべて試しましたが、うまくいかないようです。サイズ変更時に列を調整するように既に構築されているため、columnize()関数内に関数を配置することはできません。関数の中に入れて実行すると、列が増え始めて大混乱になります。minScreen480()columnize()minScreen480()window.resize

より多くの経験を持つ人が私を助けることができますか?

いまだに解決には至っていません。編集して、助けが得られるかどうかを確認したいと思いました。ありがとう！

4

2 に答える 2

4

この質問がまだ実際の場合:

サイズ変更時の列の乗算について - これは columnizer に独自のサイズ変更機能があるために発生し、この効果を停止するには、columnizer オプションbuildOnceを使用する必要があります

$('.element').columnize({ columns: 2, lastNeverTallest: true, buildOnce:true });

再列化するには、 unwrapを使用してみてください:

jQuery(document).ready(function($){

 $(window).resize(function(){

    // remove all parent make by your jquery columnizer
    $('.column > *').unwrap();

    // re-initialize jQuery columnizer with 1 column

    $('.element').columnize({ columns: 1 });

 });

});

ここで見つけましたhttp://wpquestions.com/question/show/id/2179

于 2013-01-28T06:11:13.713 に答える
0

同じ問題に取り組んでいるときに、Tommi Kaikkonen TYPESETTING RESPONSIVE CSS3 COLUMNSによるこの CSS3 ソリューションに出くわしました。どのブラウザーをサポートする必要があるかはわかりませんが、これは IE10+、Webkit、および iOS で美しく機能します。

「css3 列はコンテンツを取得し、それを column-width または column-count css-properties のいずれかに基づいて列に分割します。前者は、コンテンツを、指定した幅で動的な数の列に挿入します。後者は、コンテンツを同じ高さに分散します。あなたが与えた列の数。」

彼の例では、CSS3 属性column-widthを使用して列の幅を定義しています。これにより、 を使用して列数を指定する代わりに、列数を水平方向に動的に繰り返しcolumn-count、必要に応じて高さを動的に調整できるようになります。

私のニーズでは、固定量のコンテンツがあるため、メディア クエリを使用column-countし、ブラウザー ウィンドウのサイズに基づいて、コンテンツが含まれる列の数を制御します。

  1. CSS3 列数
  2. developer.mozilla.org/en-US/docs/Web/CSS/column-width (申し訳ありませんが、2 つのリンクしか投稿できません)
于 2014-01-22T15:02:59.523 に答える