MoreViews

1. Ratio은 아이템 객수의 비율로 계산해서 page numbering을 계산해줍니다.

2. Item은 아이템 객수만큼 계산해서 page numbering이 증가해 줍니다

MORE Ratio

HTML

<h1 class="content_tit">Ratio</h1>
<div class="js-load main">
      <div class="js-load content_component"></div>
      <ul class="list__inner">
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
      </ul>
      <div class="btn-wrap"></div>
</div>

CSS

/** 더보기 클릭 할때마다 아이템 나타나는 애니메이션 추가 */

@-webkit-keyframes fadeInFromNone { 
    0% { display: none; opacity: 0; }
    100% { display: block; opacity: 1;}
}

@-moz-keyframes fadeInFromNone {
    0% { display: none; opacity: 0; }
    100% { display: block; opacity: 1; }
}

@-o-keyframes fadeInFromNone {
    0% { display: none; opacity: 0; }
    100% { display: block; opacity: 1;}
}

@keyframes fadeInFromNone {
    0% { display: none; opacity: 0; }
    100% { display: block; opacity: 1; }
}

.list__inner .list__item__box {
    display: block;
    -webkit-animation: fadeInFromNone 0.6s ease-out;
    -moz-animation: fadeInFromNone 0.6s ease-out;
    -o-animation: fadeInFromNone 0.6s ease-out;
    animation: fadeInFromNone 0.6s ease-out;
}

.list__inner .list__item__box.active {opacity: 0; display: none;}

JS

<script src="https://unpkg.com/triplexlab/dist/all.min.js"></script>
<script>
new tr.Ratio({                   // Ratio은 아이템 객수의 비율로 계산해서 숫자들이 증가 합니다.
    targets: {
        startEl: '.js-load',             // 컴포넌트 상의 루트(Element)를 시작 선택자로 선언 합니다.
        endEl: '.js-load-list',          // 컴포넌트 상의 리스트들(Element)를 끝나는 선택자로 선언 합니다.
        eventEl: '.btn-wrap-js'          // 더보고 혹은 (숫자 증가) 기능 추가할경우, 클릭 대상의 Components를 선택자로 선언 합니다.
    },
    additems: 10,                                                    // 추가 하고 싶은 항목의 객수를 뜻합니다.(1개 이상의 값을 넣어야만 실행 가능합니다.)
    addClassName: "more_active",                                     // numbering이라는 클래스 위치에 또다른 클래스를 추가할수 있습니다.
    template: function(idIdx, current, total, addClassName="none") { // template라는 키로 더보기 버튼 템플릿을 직접 만들수 있습니다.
        return `<a href="javascript:;" class="${addClassName}">
            <span class="txt">Load more articles</span>
            <span class="numbering">
                <span data-click="${idIdx}" class="current">${current}</span>
                <span> / </span>
                <span class="total">${total}</span>
            </span>
        </a>`
    }
});
</script>

👉🏻예시확인

stackblitz 사이트 확인

MORE Item

HTML

<h1 class="content_tit">Item</h1>
<div class="js-load content_component">
      <ul class="list__inner">
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
        <li class="list__item__box js-load-list">
          <a href="#0">
            <img src="../images/logo-sub.png" alt="logo" />
            <div class="tit_inner">
              <p class="tit_sub">Triple Lab</p>
              <h3 class="tit">Please enter the contents of each content.</h3>
              <p class="txt_day">April 9, 2020</p>
            </div>
          </a>
        </li>
    </ul>

    <div class="btn-wrap"></div>
</div>

CSS

/** 더보기 클릭 할때마다 아이템 나타나는 애니메이션 추가 */
@-webkit-keyframes fadeInFromNone { 
    0% { display: none; opacity: 0; }
    100% { display: block; opacity: 1;}
}

@-moz-keyframes fadeInFromNone {
    0% { display: none; opacity: 0; }
    100% { display: block; opacity: 1; }
}

@-o-keyframes fadeInFromNone {
    0% { display: none; opacity: 0; }
    100% { display: block; opacity: 1;}
}

@keyframes fadeInFromNone {
    0% { display: none; opacity: 0; }
    100% { display: block; opacity: 1; }
}

.list__inner .list__item__box {
    display: block;
    -webkit-animation: fadeInFromNone 0.6s ease-out;
    -moz-animation: fadeInFromNone 0.6s ease-out;
    -o-animation: fadeInFromNone 0.6s ease-out;
    animation: fadeInFromNone 0.6s ease-out;
}

.list__inner .list__item__box.active {opacity: 0; display: none;}

JS

<script src="https://unpkg.com/triplexlab/dist/all.min.js"></script>
<script>
new tr.Item({                    // Item은 아이템 객수만큼 계산해서 숫자들이 증가 합니다.
    targets: {
        startEl: '.js-load',             // 컴포넌트 상의 루트(Element)를 시작 선택자로 선언 합니다.
        endEl: '.js-load-list',          // 컴포넌트 상의 리스트들(Element)를 끝나는 선택자로 선언 합니다.
        eventEl: '.btn-wrap-js'          // 더보고 혹은 (숫자 증가) 기능 추가할경우, 클릭 대상의 Components를 선택자로 선언 합니다.
    },
    additems: 10,                                     // 추가 하고 싶은 항목의 객수를 뜻합니다.(1개 이상의 값을 넣어야만 실행 가능합니다.)
    addClassName: "more_active",                      // numbering이라는 클래스 위치에 또다른 클래스를 추가할수 있습니다.
    template: function(idIdx, current, total, addClassName="none") {   // template라는 키로 더보기 버튼 템플릿을 직접 만들수 있습니다.
        return `<a href="javascript:;" class="${addClassName}">
            <span class="txt">Load more articles</span>
            <span data-click="${idIdx}" class="numbering ">
                <span class="current">${current}</span>
                <span> / </span>
                <span class="total">${total}</span>
            </span>
        </a>`
    }
});
</script>

👉🏻예시확인

stackblitz 사이트 확인