Spread.Viewsでは、メイソンリーレイアウトを使用できます。メイソンリーレイアウトは、行をカードとみなして処理する、動的なグリッドレイアウトプラグインです。カードレイアウトでは、同一サイズの表示ブロックにデータが表示されますが、メイソンリーレイアウトでは、高さや幅を自由に変えられるコンテナ内にカードを表示できます。

メイソンリーレイアウトで選択できるオプションは、次のとおりです。

オプション	デフォルト値	説明
rowHeight	1	水平方向に並べたカードに対し、カード間（行間）の最小距離を表します。デフォルト値に設定すると、メイソンリーレイアウトのカードは隣接して表示されます。
columnWidth	1	垂直方向に並べたカードに対し、カード間（列間）の最小距離を表します。デフォルト値に設定すると、メイソンリーレイアウトのカードは隣接して表示されます。
gutter	0	カード間の距離を制御します。注意: gutterとrowTemplateはそれぞれ別のオプションです。gutterはカード間のスペースを設定するのに使用し、rowTemplateはカードをフォーマットするテンプレート要素を表します。
keepOrder	true	メイソンリーレイアウトに適用するレイアウト方法を指定します。 trueに設定すると、メイソンリーレイアウトの各カードは、データを指定した順序に従って1つずつプッシュされます。 falseに設定すると、余分なスペースが最小となるように、コンパクトなレイアウトが自動作成されます。
rightToLeft	false	右から左の順に表示するかどうかを定義します。
showScrollBar	true	スクロールバーを表示するかどうかを定義します。

メイソンリーレイアウトを実装するには、次の手順を実行します。

サンプルコード

DataView参照の後に、次のファイル参照を追加します。

<link rel="stylesheet" type="text/css" href="[Your Stylesheet Path]/gc.spread.views.masonrylayout.10.0.0.css">
<script src="[Your Script Path]/gc.spread.views.masonrylayout.10.0.0.min.js" type="text/JavaScript"></script>

bodyタグ内にdivタグを追加して、ページ内のコンテナとしてDOM要素を含めます。次に、template要素を追加して、各カードを配置します。

 <div id="grid1" style="height:100%"></div><template id="rowTemplate" style="display:none">
    <div class="img-board">
        <div data-column="image"></div>
        <div class="image-meta">
            <div data-column="meta" class="image-meta-context"></div>
        </div>
</div>

2列から成るテーブルの列定義を追加します。1つの列にはイメージを配置し、もう1つの列には説明を表示します。

var columns = [{
        id: 'image',
        name: 'image',
        dataField: 'image',
        presenter: '<img class="image-content" src="{{=it.image}}" alt="dogs">'
    }, {
        id: 'meta',
        name: 'meta',
        dataField: 'meta',
        presenter: '<div class="image-meta-context">{{=it.meta}}</div>'
    }];

イベントリスナの定義において、コードを初期化します。

var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.MasonryLayout({
            gutter: 12,
            rowTemplate: '#rowTemplate'
        }));
        window.dataView = dataView;

        window.addEventListener('resize', function() {
            dataView.invalidate();
    });