3

中央の fitRows Isotope レイアウトを使用する Web サイトにページを設定しようとしています。

中央揃えのレイアウトと fitRows レイアウトを取得できます。ただし、それらを中央の fitRows レイアウトに結合することはできませんでした。

中央の Masonry レイアウトと fitRows レイアウトの間に競合があると想定しています。

これら 2 種類のレイアウトを組み合わせることは可能ですか、それとも運が悪いのでしょうか? Isotope を使用するのはこれが初めてなので、より高度なトリックを行う方法がまだわかりません。

私はアイソトープをインスタンス化するために以下を使用しています

// set up isotope
var $container = $('#candidates');
$container.imagesLoaded(function(){
        $container.isotope({
                itemSelector:   '.candidate',
                layoutMode:     'fitRows',
                masonry:        {
                                    columnWidth:    175,
                                    gutterWidth:    20,
                                    isAnimated:     true,
                                    isFitWidth:     true
                                }
            });
    });

私の完全なテストコードはここにあります: http://jsfiddle.net/hightechredneckwoman/UtHRX/23/

4

3 に答える 3

1

同位体 javascript ファイルを含めた後、次のコードを追加して、各行フィーチャのセンタリングを追加するためのデフォルトの fitRows レイアウトをオーバーライドします。

<script type="text/javascript">
// Put the following code after isotope js include
// Override and customize Isotope FitRows layout mode: CENTER each rows
var fitRows = Isotope.LayoutMode.modes.fitRows.prototype;
fitRows._resetLayout = function() {

  // pre-calculate offsets for centering each row
  this.x = 0;
  this.y = 0;
  this.maxY = 0;
  this._getMeasurement( 'gutter', 'outerWidth' );
  this.centerX = [];
  this.currentRow = 0;
  this.initializing = true;
  for ( var i=0, len = this.items.length; i < len; i++ ) {
      var item = this.items[i];
      this._getItemLayoutPosition(item);
  }
  this.centerX[this.currentRow].offset = (this.isotope.size.innerWidth +this.gutter-this.x) / 2;
  this.initializing = false;
  this.currentRow = 0;

  // centered offsets were calculated, reset layout
  this.x = 0;
  this.y = 0;
  this.maxY = 0;
  this._getMeasurement( 'gutter', 'outerWidth' );
};
fitRows._getItemLayoutPosition = function( item ) {
  item.getSize();
  var itemWidth = item.size.outerWidth + this.gutter;
  // if this element cannot fit in the current row
  var containerWidth = this.isotope.size.innerWidth + this.gutter;
  if ( this.x !== 0 && itemWidth + this.x > containerWidth ) {

    if (this.initializing)
        this.centerX[this.currentRow].offset = (containerWidth-this.x) / 2;
    this.currentRow++;

    this.x = 0;
    this.y = this.maxY;
  }

  if (this.initializing && this.x == 0) {
    this.centerX.push({ offset: 0});
  }
  //if (this.centerX[this.currentRow].offset < 0)
  //  this.centerX[this.currentRow].offset = 0;

  var position = {
    x: this.x+(this.initializing?0:this.centerX[this.currentRow].offset),
    y: this.y
  };

  this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight );
  this.x += itemWidth;

  return position;
};
</script>
于 2015-12-19T15:51:32.557 に答える
0

偶然にも、私は最近、Isotope の著者に Twitter で同じ質問をしました。彼の答えはノーでした。ただし、Isotope は中央揃えの組積造レイアウトを提供します。

于 2013-05-24T20:10:45.610 に答える