jQuery砌體排序順序從左到右而不是從上到下？

Question

在目錄網站上使用砌體。默認情況下，顯示的項目按日期排序，然後按部件號排序。我的圖像高度不一。問題在於，如果我錯了，請糾正我的錯誤，砌體將第2行第1項放在第1行中最短項目下方，而不是頁面左側。換句話說，當我的數據庫返回某個訂單時，砌體將這些物品從上到下排列（當高度變化時），而不是從左到右。

我沒有找到任何文件來控制這一點。有沒有辦法迫使砌體保持從左到右的項目順序，只是基於高度垂直浮動？

我試圖張貼一個插圖，但顯然我沒有資格這樣做。下面是圖中的一個鏈接：

Answer 1

簡單的答案是「不」

砌體幾乎可以肯定重新安排事物，以適應和承擔的順序並不重要。我說「差不多」，因爲我認爲你說得對，這不是在文檔中的任何地方拼寫出來 - 但這就是它的工作原理。

Answer 2

看看砌體順序。我沒有測試過，但它看起來可能是你正在尋找的解決方案：http://masonry-ordered.tasuki.org/options/

Answer 3

砌體中沒有選項來對項目進行排序，因爲它是一個簡單的插件，可以逐個放置磚塊。選擇新的磚塊位置很簡單：儘可能將磚塊放置得更高。

但是在這種情況下可以做的是通過添加兩行定義排序來改變腳本，假設所有磚的寬度相同（例如，總是5行）。

爲了演示這個，我使用了jQuery Masonry（被壓縮），你可以在this Fiddle中看到它。

JS

$.Mason.prototype._placeBrick = function(e) { 
    var n = $(e), 
     r, i, s, o, u; 
    r = Math.ceil(n.outerWidth(!0)/this.columnWidth), r = Math.min(r, this.cols); 
    if (r === 1) s = this.colYs; 
    else { 
     i = this.cols + 1 - r, s = []; 
     for (u = 0; u < i; u++) o = this.colYs.slice(u, u + r), s[u] = Math.max.apply(Math, o) 
    } 
    var a = Math.min.apply(Math, s), 
     f = 0; 
    for (var l = 0, c = s.length; l < c; l++) 
     if (s[l] === a) { 
      f = l; 
      break 
     } 
    /* Add new calculation, what column next brick is in: */ 
    f = $(e).index() % this.cols; /* Get col index f: Just divide with element's index */ 
    a = s[f]; /* This is current height for f-th column */ 
    /* END of customizing */ 
    var h = { 
     top: a + this.offset.y 
    }; 
    h[this.horizontalDirection] = this.columnWidth * f + this.offset.x, this.styleQueue.push({ 
     $el: n, 
     style: h 
    }); 
    var p = a + n.outerHeight(!0), 
     d = this.cols + 1 - c; 
    for (l = 0; l < d; l++) this.colYs[f + l] = p; 
}; 

Answer 4

由skobaljic's answer啓發（這是唯一砌體V2兼容），我已經破解V3做同樣的事情。那就是：

Masonry.prototype._getItemLayoutPosition = function(item) { // Hack Masonry to order items by their order in the DOM 
    item.getSize(); 
    // how many columns does this brick span 
    var remainder = item.size.outerWidth % this.columnWidth; 
    var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil'; 
    // round if off by 1 pixel, otherwise use ceil 
    var colSpan = Math[ mathMethod ](item.size.outerWidth/this.columnWidth); 
    colSpan = Math.min(colSpan, this.cols); 

    var col = $(item.element).index() % 3; // HACK : determine which column we want based on the element's index in the DOM 

    var colGroup = this._getColGroup(colSpan); 
    colGroup = [this.colYs[ col ]]; // HACK : return only the column we want 
    // get the minimum Y value from the columns 
    var minimumY = Math.min.apply(Math, colGroup); 
    var shortColIndex = col; // HACK 

    // position the brick 
    var position = { 
     x: this.columnWidth * shortColIndex, 
     y: minimumY 
    }; 

    // apply setHeight to necessary columns 
    var setHeight = minimumY + item.size.outerHeight; 
    this.colYs[ shortColIndex ] = setHeight; // HACK : set height only on the column we used 

    return position; 
}; 

希望這可以幫助別人

Answer 5

比利的回答啓發（併爲此通過skobaljic的答案:)）我只是改變shortColIndex和minimumY的初始化實現這一行爲。使用colGroup的大小可能會稍微簡單一些，而且具有不同列數的響應式佈局仍然有效。

這裏是V3.3.2的完整代碼：

Masonry.prototype._getItemLayoutPosition = function(item) { 
    item.getSize(); 
    // how many columns does this brick span 
    var remainder = item.size.outerWidth % this.columnWidth; 
    var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil'; 
    // round if off by 1 pixel, otherwise use ceil 
    var colSpan = Math[ mathMethod ](item.size.outerWidth/this.columnWidth); 
    colSpan = Math.min(colSpan, this.cols); 

    var colGroup = this._getColGroup(colSpan); 
    // ### HACK: sort by natural order, not by min col height 
    // get the minimum Y value from the columns 
    // var minimumY = Math.min.apply(Math, colGroup); 
    // var shortColIndex = utils.indexOf(colGroup, minimumY); 
    var shortColIndex = jQuery(item.element).index() % colGroup.length; 
    var minimumY = colGroup[shortColIndex]; 

    // position the brick 
    var position = { 
    x: this.columnWidth * shortColIndex, 
    y: minimumY 
    }; 

    // apply setHeight to necessary columns 
    var setHeight = minimumY + item.size.outerHeight; 
    var setSpan = this.cols + 1 - colGroup.length; 
    for (var i = 0; i < setSpan; i++) { 
    this.colYs[ shortColIndex + i ] = setHeight; 
    } 

    return position; 
};