Masonry
Masonry 以相同寬度但不同高度的區塊排列不同尺寸的內容，並具有可配置的間距。
Masonry 維護一個內容區塊列表，這些區塊具有一致的寬度但不同的高度。 內容按行排序。 如果一行已填滿指定的列數，則下一個項目會開始新的一行，並將其添加到最短的列中，以優化空間的使用。
基本 masonry
一個 Masonry 的簡單範例。 Masonry 是一個或多個項目的容器。 它可以接收任何元素，包括 <div /> 和 <img />。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
按下 Enter 鍵開始編輯
圖片 masonry
此範例示範了如何將 Masonry 用於圖片。 Masonry 按行排序其子項目。 如果您想按列排序圖片，請查看 ImageList。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
具有可變高度的項目
此範例示範了如何將 Masonry 用於具有可變高度的項目。 項目可以移動到其他列，以遵守項目始終添加到最短列的規則，從而優化空間的使用。
內容
內容
內容
內容
內容
內容
內容
內容
內容
內容
按下 Enter 鍵開始編輯
欄
此範例示範了如何使用 columns 來配置 Masonry 的欄數。
1
2
3
4
5
6
7
8
9
10
按下 Enter 鍵開始編輯
columns 接受響應式值
1
2
3
4
5
6
7
8
9
10
按下 Enter 鍵開始編輯
間距
此範例示範了如何使用 spacing 來配置項目之間的間距。 重要的是要注意，提供給 spacing 屬性的值會乘以主題的間距欄位。
1
2
3
4
5
6
7
8
9
10
按下 Enter 鍵開始編輯
spacing 接受響應式值
1
2
3
4
5
6
7
8
9
10
按下 Enter 鍵開始編輯
循序
此範例示範了如何使用 sequential 來配置循序順序。 啟用 sequential 後，項目會從左到右依序新增，而不是添加到最短的列。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
按下 Enter 鍵開始編輯
伺服器端渲染
此範例示範了如何使用 defaultHeight、defaultColumns 和 defaultSpacing，它們用於支援伺服器端渲染。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
按下 Enter 鍵開始編輯