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