同步插件中的砌體柱移位佈局的問題

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) 

};