2

プロジェクトで素晴らしい JQuery Isotope プラグインを使い始めました。すべてがうまく機能しますが、コーナー スタンプ オプションに 1 つの問題があります。

私のマスノリー グリッドの各要素は、固定幅 (220px + 5 マージン) とランダムな高さ (コンテンツに応じて) を持ち、CSS ファイルで @media クエリを使用して、異なる画面解像度で列数を変更しています (ページ幅は 230、460 にすることができます)。 、690..など)。

コーナー スタンプの問題は、最も狭いバージョン (1 列) で発生します - コーナー スタンプは同位元素で覆われています...

このデモの Isotope 公式ページでも同じ問題が発生します: http://isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html (ウィンドウを狭くすると、大きな赤い四角形が他の Isotope 要素の後ろに隠れます) .

Masnory プラグインのデモ サイトにあるように、正常に動作することがわかりました。 http://masonry.desandro.com/demos/corner-stamp.html

Masnory から Isotope にサイト スクリプトをコピーするために既に組み合わせましたが、JS/jQuery があまり得意ではないのでうまくいきませんでした :/

自分のサイトにフィルタリング オプション (Masnory プラグインでは利用できない) を持たせたいので、Isotope で機能するのは素晴らしいことです。

4

1 に答える 1

9

問題は Isotope.prototype スクリプトにあります...以下のものを使用してください:

$.Isotope.prototype._masonryReset = function() {
    // layout-specific props
    this.masonry = {};
    this._getSegments();
    var i = this.masonry.cols;
    this.masonry.colYs = [];
    while (i--) {
        this.masonry.colYs.push( 0 );
    }

    if ( this.options.masonry.cornerStampSelector ) {
        var $cornerStamp = this.element.find( this.options.masonry.cornerStampSelector ),
            stampWidth = $cornerStamp.outerWidth(true) - ( this.element.width() % this.masonry.columnWidth ),
        cornerCols = Math.ceil( stampWidth / this.masonry.columnWidth ),
        cornerStampHeight = $cornerStamp.outerHeight(true);

        for ( i = ( this.masonry.cols - cornerCols ); i < this.masonry.cols; i++ ) {
            this.masonry.colYs[i] = cornerStampHeight;
        }
    }
};

「for」呼び出しの調整に気付くでしょう。関数は Math.max を使用すべきではありません (不要)。

于 2012-02-23T18:21:58.503 に答える