jQuery Massoneria ordina da sinistra a destra piuttosto che dall'alto in basso?

Question

Utilizzo della muratura su un sito di catalogo. Per impostazione predefinita, gli elementi vengono visualizzati ordinati per data, quindi per numero di parte. Le mie immagini hanno un'altezza variabile. Il problema è, e correggimi se sbaglio, Massoneria imposta la riga 2, l'elemento 1 sotto l'articolo più corto nella riga 1 anziché a sinistra della pagina. Quindi, in altre parole, quando il mio database restituisce un determinato ordine, Masonry posiziona gli articoli ordinati dall'alto verso il basso (quando si alterna l'altezza), piuttosto che da sinistra a destra.

Non riesco a trovare nulla nella documentazione per controllarlo. C'è un modo per costringere la Massoneria a tenere gli oggetti in ordine da sinistra a destra e galleggiare solo verticalmente in base all'altezza?

Ho tentato di pubblicare un'illustrazione, ma a quanto pare non sono qualificato per farlo. Ecco un link al illustrazione:

Answer 1

La semplice risposta è "no"

Massoneria quasi per definizione riorganizza le cose per adattarsi e assume l'ordine non è importante. Dico "quasi" perché penso che tu abbia ragione sul fatto che questo non è scritto in alcun modo nei documenti - ma è così che funziona.

Answer 2

Dai un'occhiata a Massoneria ordinata. Non ho provato questo, ma sembra che potrebbe essere la soluzione che stai cercando: http://masonry-ordered.tasuki.org/options/

Answer 3

Non c'è opzione in muratura per ordinare gli elementi, perché è un semplice plugin che mette mattoni uno per uno. Scegliere la nuova posizione del mattone è semplice: posizionarlo più in alto che puoi.

Ma ciò che si può fare in questo caso è cambiare lo script aggiungendo due righe che definiscono l'ordinamento, assumendo che tutti i mattoni abbiano la stessa larghezza (ad esempio, sempre 5 in fila).

Per dimostrarlo, ho utilizzato jQuery Masonry (era compresso) e puoi verificarlo in 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

Ispirato skobaljic's answer (che è compatibile solo con la Massoneria v2), ho violato v3 per fare la stessa cosa. Eccolo:

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; 
}; 

Spero che questo aiuti qualcuno

Answer 5

ispirato dalla risposta di Billy (e per questo dalla risposta di Skobaljic :)) Ho appena cambiato l'inizializzazione di shortColIndex e minimumY per raggiungere questo comportamento. Potrebbe anche essere un po 'più semplice, usando le dimensioni di colGroup: i layout reattivi con diversi conteggi di colonna funzionano ancora.

Ecco il codice completo per 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; 
};