なぜ必要なのか
旅行アルバムで友人は横長・縦長の写真と思い出を見ます。同じ高さの行は大きな隙間を残すか、縦の港を切ります。同じ項目の整列より各写真の比率を重視します。
どう解決するのか
写真の元の比率を保ち、最も短い列にカードを置きます。思い出を開くと後のカードが重ならずに移動します。DOMとキー操作の順序は変えません。小画面は1列、リセットはメモを閉じます。
足を止めた場所
横に広い岸辺と縦に長い港、それぞれの記憶の場所。
01
朝の岸辺
思い出を読む
砂丘の道に低い波が届きます。広い水平線を切り取らずに見せます。
02
夕暮れの港
思い出を読む
縦の構図が手前の船から水面の最後の光へ続きます。
03
湖への寄り道
思い出を読む
松が道を囲みます。岸辺全体を写し、少し休んでから帰りました。
04
最後のひと眺め
思い出を読む
同じ浜辺の写真に長い思い出を添えました。説明の長さもカードの高さに影響します。メモを開くと後のカードが重ならずに移動する必要があります。
本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。
どんな考え方なのか
メイソンリーは共通の行を要求せず、高さの違う項目を詰めます。視覚的な閲覧に向き、厳密な順序比較に常に適するとは限りません。画像・書体・展開の寸法が変わったら再計算します。
この選択を話し合う
コメントは全言語で共有。投稿にはGitHubログインが必要です。