## 無限加載 ``` <script src="/static/libs/infinite-scroll/infinite-scroll.min.js"></script> <link href="/static/libs/infinite-scroll/infinite-scroll.css" rel="stylesheet"> <ul class="list scroller-list"> @foreach($articles as $article) <li class="scroller-item"> <a href="/pc/activity/detail?id={{$activity->id}}"> <img src="/pc/images/logo.png" class="logo"> <img src="{{ $helper::getPicture($activity->cover_id) }}" class="img"> </a> </li> @endforeach </ul> {!! $articles->appends(['name' => $category->name])->links() !!} </article> <!-- status elements --> <div class="scroller-status"> <div class="loader-ellips infinite-scroll-request"> <span class="loader-ellips__dot"></span> <span class="loader-ellips__dot"></span> <span class="loader-ellips__dot"></span> <span class="loader-ellips__dot"></span> </div> <p class="scroller-status__message infinite-scroll-last">End of content</p> <p class="scroller-status__message infinite-scroll-error">No more pages to load</p> </div> <script> $(document).ready(function (){ // init Infinite Scroll $('.scroller-list').infiniteScroll({ path: '.pagination a', append: '.scroller-item', status: '.scroller-status', hideNav: '.pagination', }); }); </script> ```