【jquery】masonryがスマホ画面で横並びしない場合の解決方法

この記事について

つまずきポイント要約

• masonryのデフォルトではスマホの画面幅に2つ以上並べるのはサイズ的に無理らしい

javascript プラグインの masonry を使ったページでウインドウが横並びしない場合の対処法。

対処法 → columnWidth オプションを設定する。

<div class="js-masonry">


↓↓↓↓

<div class="js-masonry"
     data-masonry-options='{
        "columnWidth": 50,
        "itemSelector": ".item",
        "transitionDuration": "1.5s"
     }'
>

columnWidth は、ボックスの横幅を指定するオプション。
masonry のデフォルトでは、スマホの画面幅にに二つ以上ウインドウを並べることはサイズ的に無理らしい。
そこで、50pxとかボックスのサイズを小さく指定する必要がある。