1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
MASONY/CARD LAYOUT

bootstrap4 .cardsは、問題があり、B5で廃止。javascriptに移行

採用：「Muuri」:jQuery不要/Bootstrap5版とは違うもの

※商用利用可：⇒ muuri

※解説：⇒ muuri 使い方

ie9-で動作/要:polyfill:Web-Animations.js

ドラッグ/要:Hammer.js：

Muuri/標準:ドラッグ不可

hogefuga
hogehoge
hogefuga
hogehoge hogefuga
hogehoge
hogefuga
hogehoge
hogefuga
hogehoge hogefuga
hogehoge hogefuga
hogehoge
hogefuga
hogehoge hogefuga
hogehoge hogefuga
hogehoge hogefuga
hogehoge
hogefuga
hogehoge hogefuga
hogehoge
hogefuga
hogehoge 

//code
var grid = new Muuri('#test1');

/* 必須CSS */
/* 親要素 */
.grid { position: relative; }

/* アイテム */
.item { position: absolute; display: block; }
/* 幅指定（要素ごとでOK） */

Muuri/オプション:ドラッグ可

hogefuga
hogehoge
hogefuga
hogehoge hogefuga
hogehoge
hogefuga
hogehoge
hogefuga
hogehoge hogefuga
hogehoge hogefuga
hogehoge
hogefuga
hogehoge hogefuga
hogehoge hogefuga
hogehoge hogefuga
hogehoge
hogefuga
hogehoge hogefuga
hogehoge
hogefuga
hogehoge 

//code
var grid2 = new Muuri('#test2', {
  dragEnabled: true
});

Muuri/colで試してみた

hogefuga
hogehoge
hogefuga
hogehoge hogefuga
hogehoge
hogefuga
hogehoge
hogefuga
hogehoge hogefuga
hogehoge hogefuga
hogehoge
hogefuga
hogehoge hogefuga
hogehoge hogefuga
hogehoge hogefuga
hogehoge
hogefuga
hogehoge hogefuga
hogehoge
hogefuga
hogehoge 

//code
var grid3 = new Muuri('#test3', {
  dragEnabled: true
});
/* marginはつけない */
.brick { display: block; /* 必須 */
  position: absolute; /* 必須 */
  padding: 6px;
  border-color: #333;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
}
タイトル
Search
Filter
Sort
Item 1
(peach)
Item 2
(orange)
Item 3
(banana apple)
Item 4
(grape orange)
Item 5
(strawberry)
Item 6
(cherry banana)
Item 7
(melon apple)
Item 8
(kiwi)
Item 9
(watermelon)
Item 10
(pineapple)
Item 11
(blueberry)
Item 12
(peach)
Item 13
(lemon)
Item 14
(grapefruit)
Item 15
(guava)
Item 16
(yellowstrawberry)
Item 17
(avocado)
Item 18
(grape)
Item 19
(peach banana)
Item 20
(grape) 

//code