同位素布局是否可以将中心fitRows结合起来？

Question

我正在尝试在使用居中的fitRows同位素布局的网站上设置一个页面。

我可以得到居中布局，我可以得到fitRows布局。但是，我还没有能够将它们组合成居中的fitRows布局。

我假设居中的砌体和fitRows布局之间存在冲突。

是否可以将这两种布局结合起来，还是我运气不好？这是我第一次使用同位素，所以我不确定如何做一些更高级的技巧。

我用下面的实例同位素

// 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/

Answer 1

巧合的是，最近我问同位素笔者在Twitter上的同样的问题。 His answer是没有。但是，同位素确实提供了centered masonry布局，这可能是一个可接受的替代品。

Answer 2

我只是做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数学的函数的其余部分。

Answer 3

纳入同位素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>