0

一般的な質問で申し訳ありませんが、この例のように、新しい Flickr レイアウトに似た画像ショーケースを実装しようとしています。

私が抱えている問題は、レスポンシブデザインにあります。Isotope、Wookmark、Grid-a-licious などのさまざまなプラグインを調べましたが、これらのソリューションはすべて、ブラウザー ウィンドウのサイズが変更されたときに不均一な余白/ガターを残すか、ピンタレストのスタイルの下部に配置されません。行に垂直に積み重ねるだけです。

Flickrのように画像のサイズを変更して行の幅を完全に埋め、すべての画像を下部に正しく配置するプラグインを誰かが知っているかどうか疑問に思っていました.

あるいは、このようなことのために JavaScript をどこから始めればよいかを知ることは素晴らしいことでしょうか?

4

2 に答える 2

0

私の旅行では、css3 メディア クエリを介していくつかのレスポンシブ サイトに取り組んできました。これは、メディアクエリの変更のイベントでjavascriptをトリガーする必要がある場合に見つけて使用した修正されたソリューションです:

// define a query here
var theQuery = "(min-width: 960px)";

var mql = window.matchMedia( theQuery );
var TO = setTimeout( function(){}, 100);

var handleMediaChange = function (mediaQueryList) {
    if (mediaQueryList.matches) {

        // the media query evaluates to true
        clearTimeout(TO);
        window.state = 0;

        TO = setTimeout( function(){
            // javascript actions go here   
        }, 100 );

    } else {

        // @media query evaluates to false
        clearTimeout(TO);
        window.state = 0;   

        TO = setTimeout( function(){
            // javascript actions go here   
        }, 100 );

    }
}

mql.addListener(handleMediaChange);
handleMediaChange(mql);

本質的には、クエリを定義してからリスナーを追加して、クエリをトリガーする変更についてウィンドウ オブジェクトを監視することができます。それがトリガーされると、メディアクエリがtrueまたはfalseに評価されるように2セットのjavascriptをそれぞれ定義しましたが、このif条件を削除して、変更を加えてスクリプトを実行することができます...

これを試してみて、それが役立つことを願っています

于 2013-05-22T20:55:31.930 に答える