2012-01-24 8 views
2

私のプロジェクトでawsome JQuery Isotopeプラグインを使い始めました。すべて素晴らしいですが、私はcorner-stapmオプションで1つの問題があります。jQueryアイソトープコーナースタンプの問題

私のマスコットグリッドの各要素は、幅(220px + 5マージン)とランダムな高さ(内容によって異なります)とCSSファイルの@mediaクエリを使用して別の画面解像度で列番号を変更しています230、460、690など)。コーナースタンプ付き

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

を同じ問題が、このデモでアイソトープ公式ページに発生します。http://isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html(ウィンドウがあるとき他のアイソトープ要素の背後にある大きな赤い四角形を絞りました)。

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

私はすでにアイソトープにMasnoryからサイトのスクリプトをコピーするために結合しましたが、私はJS/jQueryのでは何もあまりにも良い午前と運で:/

同位体での作業持っているのは素晴らしいだろう私のサイトにフィルタリングオプションがあるようにしたいので(Masnoryプラグインでは利用できません)。あなたは、コール「のために」、機能は使用すべきではないMath.maxの調整に気付くでしょう

$.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; 
     } 
    } 
}; 

答えて

9

問題は、以下のいずれかを使用... Isotope.prototypeスクリプトであります(必要ありません)。

+0

私のためにうまく働いただけで、わずかなコードの書式設定の問題も修正されました:) – Toddish

+0

@Toddishこのコードはどこに配置する必要がありますか? –

+0

@NickGinanto Isotopeを組み込んだ後、それを呼び出す前に。 – Toddish