Question

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

我可以获得居中的布局，我可以获得fitRows布局。但是，我无法将它们组合成一个居中的fitRows布局。

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

是否可以将这两种类型的布局结合起来，还是我不幸运？这是我第一次使用Isotope，所以我不知道如何做一些更高级的技巧。

我正在使用以下内容来实例化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/

Answer 1

我刚刚制作了一个可能有帮助的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 2

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

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

2 个答案: