jQueryによる画像のランダム表示でPCとSPで表示枚数を変更したい

Question

jQueryで画像のランダム表示をさせ、レスポンシブ時に表示枚数を変更させたいです。
PCでは横に５枚２列、SPでは横に３枚３列で表示させたいのですが、
表示枚数の変更の仕方が分かりません。
今のコードではSPにした時、４列目に１枚出てきてしまうので、９枚に変えたいです。
ご教示頂けますでしょうか。

該当のソースコード

<ul randomPh="10" class="randam_1">
    <li><img src="img/user/01.jpg" /></li>
    <li><img src="img/user/02.jpg" /></li>
    <li><img src="img/user/03.jpg" /></li>
    <li><img src="img/user/04.jpg" /></li>
    <li><img src="img/user/05.jpg" /></li>
    <li><img src="img/user/06.jpg" /></li>
    <li><img src="img/user/07.jpg" /></li>
    <li><img src="img/user/08.jpg" /></li>
    <li><img src="img/user/09.jpg" /></li>
    <li><img src="img/user/10.jpg" /></li>
    <li><img src="img/user/11.jpg" /></li>
</ul>

.randam_1 {
    li {
        display: inline-block;
        width: calc(100%/5);
        @include sp {
            width: calc(100%/3);
        }
        img {
            width: 100%;
        }
    }
} 

$(function () {
    $.fn.extend({
        randomPh: function (num) {
            return this.each(function () {
                var chn = $(this).children().hide().length;
                for (var i = 0; i < num && i < chn; i++) {
                    var r = parseInt(Math.random() * (chn - i)) + i;
                    $(this).children().eq(r).show().prependTo($(this));
                }
            });
        }
    });

    $("[randomPh]").each(function () {
        $(this).randomPh($(this).attr("randomPh"));
    });

});

Comments

[kei344]

CSSではなくSCSSやSASSでは？

[chaso0start]

すいません、scssです。

[kei344]

（質問文は編集できます）コードブロック部分「```CSS」を「```SCSS」に変えてください。

Answer 1

スマホのときだけli:last-childを非表示にすればよいのでは。もしくはli:nth-of-type(9)~*を非表示。

【:last-child - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:last-child

【:nth-of-type() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type

【一般兄弟結合子 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator

Comments

[chaso0start]

nth-of-typeで消すことができました。早々にご回答頂き大変助かりました。有難うございました。

Answer 2

考え方としてはこういう感じですかね？

1. pcとspを認識するフラグを作る
2. 写真を格納するリストを入れる要素を用意する
3. pcなら1個、spなら2個複写する
4. 複写したリストに写真を個数ずつ代入する

1はUserAgentオブジェクトを使えばクリアできるでしょう
3はcloneメソッドでいけます

あとランダム表示とのことなので、写真を格納した配列のインデックスをランダムソートすればいいでしょう。

Comments

[chaso0start]

解決致しました。早々にご回答有難うございました。