3

I am attempting to set up a page on the website that utilizes a centered fitRows Isotope layout.

I can get the centered layout, and I can get the fitRows layout. However, I have not been able to combine them into a centered fitRows layout.

I am assuming there is a conflict between the centered Masonry and fitRows layouts.

Is it possible to combine these 2 types of layouts or am I out of luck? This is the first time that I've used Isotope, so I'm not sure how to do some of the more advanced tricks yet.

I'm using the following to instantiate 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
                                }
            });
    });

My full test code can be found here: http://jsfiddle.net/hightechredneckwoman/UtHRX/23/

4

3 回答 3

4

我刚刚制作了 fitRows 的修改版本，可能会有所帮助：

  // modified Isotope methods for gutters in fitRows
Number.prototype.roundTo = function(num) {
    var resto = this%num;
    if (resto <= (num/2)) { 
        return this-resto;
    } else {
        return this+num-resto;
    }
}

   $.Isotope.prototype._fitRowsLayout = function($elems) {
    var instance = this,
          containerWidth = this.element.width(),
          props = this.fitRows;

    var gutter = this.options.fitRows && this.options.fitRows.gutterWidth || 0;
    var columnWidth = this.options.fitRows && this.options.fitRows.columnWidth ||
                  // or use the size of the first item
                  this.$filteredAtoms.outerWidth(true) ||
                  // if there's no items, use size of container
                  containerWidth;
console.log("C="+columnWidth);
      $elems.each( function() {
        var $this = $(this),
            atomW = $this.outerWidth(true),
            atomH = $this.outerHeight(true);


    if(props.x !== 0 && props.x + atomW + gutter <= containerWidth){
        props.x = props.x.roundTo(columnWidth + gutter);
    }

        if ( props.x !== 0 && atomW + props.x > containerWidth ) {
          // if this element cannot fit in the current row
          props.x = 0;
          props.y = props.height;
        }

        // position the atom
        instance._pushPosition( $this, props.x, props.y );

        props.height = Math.max( props.y + atomH, props.height );
        props.x += atomW;

    });

};

它旨在支持装订线和列宽，但对函数的其余部分使用常规的 fitRows 数学。

于 2013-08-13T01:49:20.530 回答
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

巧合的是，我最近在 Twitter 上向 Isotope 作者提出了同样的问题。他的回答是否定的。但是，Isotope 确实提供了居中的砌体布局，这可能是可接受的替代品。

于 2013-05-24T20:10:45.610 回答