Skip to main content
vue-masonry URL追加
ソース リンク
oriri
  • 6,160
  • 2
  • 6
  • 24

(素の)JavaScript以外なら, Vue や React を使う方法になるかも (そのような再配置が用意されてるかどうかは不明)
参考

参考:

(素の)JavaScript以外なら, Vue や React を使う方法になるかも (そのような再配置が用意されてるかどうかは不明)
参考:

(素の)JavaScript以外なら, Vue や React を使う方法になるかも

参考:

追記 (上から順に配置する場合) -- コメント受けて
ソース リンク
oriri
  • 6,160
  • 2
  • 6
  • 24

追記 (Google Colabで動作確認可能)


追記 (上から順に配置する場合) -- コメント受けて

高さの異なる項目を, 上から順に詰めて並べていく場合

Layoutとしては, @hinaloe さんの回答にあるように組積レイアウト(Masonry_Layout) の登場・普及まで待つ必要があるでしょう

現状は, HTML内の要素をそのまま並べることはできないため, 一旦 JavaScriptで取り込み再配置の必要があるでしょう

  • 配列の形で要素を持っておき, 表示の段階で並べる (配列は fetch など利用しサーバー側から取得するなど)
  • HTML内の要素を取り扱うのなら, 要素を一旦 配列として取り込む

再配置は JavaScriptで行うのなら, 以下のような方法

  • top, left などの属性指定し, 座標を固定する方法
  • 3つ(あるいは 2つ)の Flexboxを用意し横に並べる。ひとつの Flexbox内では縦に並べる

最初は, それぞれの列の高さを 0 とし, 項目追加しながらそれぞれの列の高さを更新
追加する列の求め方は, 高さの一番低い列。それが複数あるなら左側の列。
(あるいは望むような独自の方法)


(素の)JavaScript以外なら, Vue や React を使う方法になるかも (そのような再配置が用意されてるかどうかは不明)
参考:

追記

追記 (Google Colabで動作確認可能)


追記 (上から順に配置する場合) -- コメント受けて

高さの異なる項目を, 上から順に詰めて並べていく場合

Layoutとしては, @hinaloe さんの回答にあるように組積レイアウト(Masonry_Layout) の登場・普及まで待つ必要があるでしょう

現状は, HTML内の要素をそのまま並べることはできないため, 一旦 JavaScriptで取り込み再配置の必要があるでしょう

  • 配列の形で要素を持っておき, 表示の段階で並べる (配列は fetch など利用しサーバー側から取得するなど)
  • HTML内の要素を取り扱うのなら, 要素を一旦 配列として取り込む

再配置は JavaScriptで行うのなら, 以下のような方法

  • top, left などの属性指定し, 座標を固定する方法
  • 3つ(あるいは 2つ)の Flexboxを用意し横に並べる。ひとつの Flexbox内では縦に並べる

最初は, それぞれの列の高さを 0 とし, 項目追加しながらそれぞれの列の高さを更新
追加する列の求め方は, 高さの一番低い列。それが複数あるなら左側の列。
(あるいは望むような独自の方法)


(素の)JavaScript以外なら, Vue や React を使う方法になるかも (そのような再配置が用意されてるかどうかは不明)
参考:

Google Colabで確認可能なコード追加
ソース リンク
oriri
  • 6,160
  • 2
  • 6
  • 24

追記

Google Colab あるいは Jupyter で動作確認できるコード用意してみたです

from ipywidgets import Layout, Button, Box, VBox
from random import randint
box_layout = Layout(display='flex',
                    flex_flow='column wrap',
                    width='40%', height='400px',
                    border='thin solid blue')

arr = [randint(30, 200) for n in range(10)]
# arr[n] `-4` の数値はたぶん Buttonの marginか何か (普通は無視してよいかも)
items = [Button(description=f'{n}', layout=Layout(width='120px', height=f'{arr[n] -4}px'), button_style='warning')
         for n in range(len(arr))]
display(VBox(children=items, layout=box_layout))

def fn(arr, ncol):
    height, mod = divmod(sum(arr), ncol)
    if mod: height += 1
    s,it_arr = 0,iter(arr)
    for n in it_arr:
        s += n
        if s < height: continue
        ncol -= 1
        if ncol == 1:
            return s if n +sum(it_arr) > height else height
        height,s = s,0

# `+3` の数値は, padか marginか何か … 普通は(htmlでは)無視してよいかも
box_layout.height = f'{fn(arr, 3) +3}px'

追記

Google Colab あるいは Jupyter で動作確認できるコード用意してみたです

from ipywidgets import Layout, Button, Box, VBox
from random import randint
box_layout = Layout(display='flex',
                    flex_flow='column wrap',
                    width='40%', height='400px',
                    border='thin solid blue')

arr = [randint(30, 200) for n in range(10)]
# arr[n] `-4` の数値はたぶん Buttonの marginか何か (普通は無視してよいかも)
items = [Button(description=f'{n}', layout=Layout(width='120px', height=f'{arr[n] -4}px'), button_style='warning')
         for n in range(len(arr))]
display(VBox(children=items, layout=box_layout))

def fn(arr, ncol):
    height, mod = divmod(sum(arr), ncol)
    if mod: height += 1
    s,it_arr = 0,iter(arr)
    for n in it_arr:
        s += n
        if s < height: continue
        ncol -= 1
        if ncol == 1:
            return s if n +sum(it_arr) > height else height
        height,s = s,0

# `+3` の数値は, padか marginか何か … 普通は(htmlでは)無視してよいかも
box_layout.height = f'{fn(arr, 3) +3}px'
ソース リンク
oriri
  • 6,160
  • 2
  • 6
  • 24
読み込んでいます