11

メーソンリーをカタログサイトで使用。デフォルトでは、表示されるアイテムは日付順、次に部品番号順でソートされます。私の画像は高さが異なります。問題は、Masonry が行 2 の項目 1 を、ページの左側ではなく、行 1 の最も短い項目の下に設定することです。間違っている場合は訂正してください。つまり、私のデータベースが特定の順序を返すと、Masonry はそれらのアイテムを左から右ではなく、上から下 (高さが異なる場合) に並べます。

これを制御するためのドキュメントは見つかりません。Masonry にアイテムを左から右に順番に保持させ、高さに基づいて垂直にフロートさせる方法はありますか?

イラストを投稿しようとしましたが、どうやら投稿する資格がないようです。イラストへのリンクは次のとおりです。

ここに画像の説明を入力

4

6 に答える 6

4

ビリーの答えに触発されました（したがって、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;
};
于 2015-10-23T15:07:38.833 に答える
3

Masonry はレンガを 1 つずつ配置する単純なプラグインであるため、アイテムを並べ替えるオプションはありません。新しいブロックの位置を選択するのは簡単です。できるだけ高く配置します。

ただし、この場合にできることは、すべてのブリックが同じ幅 (たとえば、常に 5 行) であると仮定して、並べ替えを定義する 1 つの 2 行を追加してスクリプトを変更することです。

これを実証するために、jQuery Masonry (圧縮済み) を使用しました。この 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;
};
于 2014-11-11T21:57:16.713 に答える
0

skobaljic の回答(Masonry 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;
};

これが誰かを助けることを願っています

于 2015-07-29T10:45:10.280 に答える
0

Masonry Ordered をご覧ください。私はこれをテストしていませんが、探しているソリューションのようです: http://masonry-ordered.tasuki.org/options/

于 2014-01-03T11:38:48.060 に答える
0

簡単な答えは「いいえ」です

メーソンリーはほぼ定義上、物事を適合するように再配置し、順序は重要ではないと想定しています。私が「ほぼ」と言ったのは、これがドキュメントのどこにも明記されていないことは正しいと思うからですが、それが機能する方法です。

于 2013-07-30T03:40:26.740 に答える