javascript - 同位素插件中砌体列移动布局的问题

Question

当用户将光标聚焦在“发表评论”输入框上时，我的 div 会更改高度(以显示最初隐藏的提交按钮)。当 div 的高度发生变化时，我希望仅该列中的元素发生移动以适应高度变化。我很高兴地发现 jquery 同位素插件有一个功能:masonryColumnShift

我一直在这里关注这篇文章http://isotope.metafizzy.co/custom-layout-modes/masonry-column-shift.html ，但是如果我将布局设置为 masonryColumnShift，我的元素根本不会显示。 当我的布局设置为“砖石”时工作正常。

HTML:

<div id="main">
    <div id="Container">       
         <div class="item">   
              ...
          </div>
    </div>
</div>

JS:

$(#Container).isotope({
  itemSelector: '.item',
  layoutMode: 'masonryColumnShift'
});

CSS:

    #main
    {    
        clear:both;
        padding:40px; 
    }

    #Container
    {
    }



.item
{
  margin-right:10px;
  margin-bottom:10px;
  float:left;  
  display:block;
  width:250px;
  padding:15px;
  ...
}

如果我这样做，它就会起作用:

 $(#Container).isotope({
      itemSelector: '.item',
      layoutMode: 'masonry'
  });

Answer 1

想通了。应该添加一些脚本来让它工作。这是:

// -------------------------- Masonry Column Shift -------------------------- //

// custom layout mode
$.Isotope.prototype._masonryColumnShiftReset = function () {
    // layout-specific props
    var props = this.masonryColumnShift = {
        columnBricks: []
    };
    // FIXME shouldn't have to call this again
    this._getSegments();
    var i = props.cols;
    props.colYs = [];
    while (i--) {
        props.colYs.push(0);
        // push an array, for bricks in each column
        props.columnBricks.push([])
    }
};

$.Isotope.prototype._masonryColumnShiftLayout = function ($elems) {
    var instance = this,
    props = instance.masonryColumnShift;
    $elems.each(function () {
        var $brick = $(this);
        var setY = props.colYs;

        // get the minimum Y value from the columns
        var minimumY = Math.min.apply(Math, setY),
      shortCol = 0;

        // Find index of short column, the first from the left
        for (var i = 0, len = setY.length; i < len; i++) {
            if (setY[i] === minimumY) {
                shortCol = i;
                break;
            }
        }

        // position the brick
        var x = props.columnWidth * shortCol,
      y = minimumY;
        instance._pushPosition($brick, x, y);
        // keep track of columnIndex
        $.data(this, 'masonryColumnIndex', i);
        props.columnBricks[i].push(this);

        // apply setHeight to necessary columns
        var setHeight = minimumY + $brick.outerHeight(true),
      setSpan = props.cols + 1 - len;
        for (i = 0; i < setSpan; i++) {
            props.colYs[shortCol + i] = setHeight;
        }

    });
};

$.Isotope.prototype._masonryColumnShiftGetContainerSize = function () {
    var containerHeight = Math.max.apply(Math, this.masonryColumnShift.colYs);
    return { height: containerHeight };
};

$.Isotope.prototype._masonryColumnShiftResizeChanged = function () {
    return this._checkIfSegmentsChanged();
};

$.Isotope.prototype.shiftColumnOfItem = function (itemElem, callback) {

    var columnIndex = $.data(itemElem, 'masonryColumnIndex');

    // don't proceed if no columnIndex
    if (!isFinite(columnIndex)) {
        return;
    }

    var props = this.masonryColumnShift;
    var columnBricks = props.columnBricks[columnIndex];
    var $brick;
    var x = props.columnWidth * columnIndex;
    var y = 0;
    for (var i = 0, len = columnBricks.length; i < len; i++) {
        $brick = $(columnBricks[i]);
        this._pushPosition($brick, x, y);
        y += $brick.outerHeight(true);
    }

    // set the size of the container
    if (this.options.resizesContainer) {
        var containerStyle = this._masonryColumnShiftGetContainerSize();
        containerStyle.height = Math.max(y, containerStyle.height);
        this.styleQueue.push({ $el: this.element, style: containerStyle });
    }

    this._processStyleQueue($(columnBricks), callback)

};