もっと見るボタン JavaScriptで実装

Question

前提・実現したいこと

実装内容：静的なhtmlでもっと見るボタンを作成

作成したいサイト内容▼
・画像を複数枚サイトに表示したい（枚数は未定ですが３０枚程を予定）
・初めに見れる画像枚数は６枚を予定
『もっと見る』ボタンを作成して、ボタンクリックした際に６枚ずつ表示される
※クリックした際に下に画像が挿入される

決めているサイズ▼
コンテンツ幅なし（width:1200px;）
画像サイズ 370px×562px
余白　　　　45px（２枚目の画像両端に余白）

現在の様子▼

発生している問題・エラーメッセージ

２点問題がございます。
以下内容になりますのでお手数ですがご確認お願い致します。

①画像と画像の間に余白を入れたいのですが、margin-right（行目）で指定したところ
余白は入ったものの３枚目にも余白が入ってしまいます。
〇行目のみ余白なし指定できるnth-child()を使用しようと考えたのですが、
画像が複数枚挿入する為個々に指定するより他の方法があればご教示頂きたいです。

②『もっと見る』ボタンの挙動は作業することができたのですが、
もっと見るボタンをクリックした際に画面位置そのまま、もっと見るボタンが見えている状態で、
画像が上に挿入されるという見た目です。
１クリックで６枚の挿入、画像サイズ370×562なので現在の挙動では、
挿入された画像をスクロールで上にいかないと見る事ができません。
１クリックでしたらまだ問題ないのですが、2・3回繰り返しクリックしてしまうとスクロールに手間がかかります。
その為挙動としては、画像が上ではなく下に挿入、同時にもっと見るボタンを下がり見ているページ位置は変更なしで、
ユーザーが挿入された画像を６枚見てからもっと見るボタンを再度クリックする状況を希望します。

もっとみるボタンをクリックした際▼

html

<section>
  <ul class="list">
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
    <li><a href=""><img src="img/img_a.jpg" alt=""></a></li>
  </ul>
  <div>
    <div class="more_button more">
      <button>もっと見る</button>
    </div>
  </div>
</section>

css

	
section {
    width: 1200px;/*コンテンツ幅*/
    margin: 0 auto;
}
.list {
    margin: auto;
    padding: 0;
}
.list li {
    opacity: 1;
    list-style: none;
    margin-top: 46px;
    height: 562px;
    transition: all 0.4s ease 0s;
    float: left;
    margin-right: 20px;/*※問題点でお伝えした①*/
}
.list li a{
    width: 370px;
    margin-bottom: 0;
}
.list li.is-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
}
.more {
    text-align: center;
}
.more_button button {
    font-size: 21px;
    width: 356px;
    padding: 20px 0;
    border: 1px solid #000000;
    outline: 0;
    background: #fff;
    color: #000000;
}

JavaScript

$(function() {
            var moreNum = 6;
$('.list li:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
$('.more').on('click', function() {
  $('.list li.is-hidden').slice(0, moreNum).removeClass('is-hidden');
  if ($('.list li.is-hidden').length == 0) {
    $('.more').fadeOut();
  }
});
});

補足情報

使用しているPC：Windows 10
参考にしたサイト：https://qiita.com/auko55736370/items/62a3a6b715b9fcb5e3f0

Comments

[Zuishin]

https://teratail.com/questions/294441

同じ質問者かな？

[OHIRA_web]

URLご教示頂きありがとうございます。
そちらで質問されている質問者の方とは違いますが、
不明点が同じで大変参考になりました。
ありがとうございます。

Answer 1

① の質問

画像の列数が3列固定なら、

nth-child(3n) で 3, 6, 9・・・番目に適用されます。

.list li:nth-child(3n) {
  margin-right: 0;
}

② に関しては修正依頼のコメントにあるリンク先を参照してみてください。

Comments

[OHIRA_web]

早速ご回答頂きありがとうございます。
ご指摘頂きました内容を追記したところ、
無事に問題点２点解決致しました。

chromeの性質やnth-child(3n)のやり方等、
まだ知識不足の点をご教示頂き大変助かりました。
また、機会がありましたら何卒宜しくお願い致します。