jQuery Kamieniarstwo sortowanie od lewej do prawej zamiast od góry do dołu?

Question

Korzystanie z muru na stronie katalogu. Domyślnie wyświetlane elementy sortują według daty, a następnie według numeru części. Moje obrazy mają różną wysokość. Problem polega na tym, i popraw mnie, jeśli się mylę, Masonry ustawia wiersz 2, pozycja 1 poniżej najkrótszej pozycji w rzędzie 1, a nie po lewej stronie. Innymi słowy, kiedy moja baza danych zwraca określoną kolejność, Masoner umieszcza te elementy uporządkowane od góry do dołu (przy różnych wysokościach), zamiast od lewej do prawej.

Nie znajduję niczego w dokumentacji, aby to kontrolować. Czy istnieje sposób zmuszenia Kamieniarza do utrzymywania przedmiotów w kolejności od lewej do prawej i po prostu unoszą się pionowo w zależności od wzrostu?

Próbowałem opublikować ilustrację, ale najwyraźniej nie jestem do tego upoważniony. Oto link do ilustracji:

Answer 1

Prosta odpowiedź brzmi „nie”

murarskie niemal z definicji przestawia rzeczy w montażu i zakłada, że ​​kolejność nie jest ważna. Mówię "prawie", ponieważ uważam, że masz rację, że nie jest to nigdzie napisane w dokumentach - ale tak to działa.

Answer 2

Spójrz na Masonry Zamówione. Nie testowałem tego, ale wygląda na to, że może to być rozwiązanie, którego szukasz: http://masonry-ordered.tasuki.org/options/

Answer 3

Nie ma opcji w Masonry do sortowania przedmiotów, ponieważ jest to prosta wtyczka, która umieszcza cegły jeden po drugim. Wybór nowej pozycji cegły jest prosty: umieść go wyżej, jak możesz.

Ale w tym przypadku można zmienić skrypt, dodając dwie linie definiujące sortowanie, zakładając, że wszystkie cegły mają taką samą szerokość (na przykład zawsze 5 w rzędzie).

Aby to zademonstrować użyłem jQuery Masonry (został skompresowany) i można go sprawdzić w 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

Zainspirowany skobaljic's answer (który jest kompatybilny tylko z Gilotyny v2), mam posiekany v3 do zrobienia tego samego. Oto ona:

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

Nadzieja to pomaga komuś

Answer 5

zainspirowany odpowiedzi Billy'ego (i przez nich odpowiedzi skobaljic za :)) Ja po prostu zmienił inicjalizacji shortColIndex i minimumY osiągnąć to zachowanie. Może być trochę łatwiej plus - przy użyciu rozmiaru colGroup - nadal działają responsywne układy z różnymi kolumnami.

Oto pełna kod 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; 
};