Infinite scrolling on blogs has become every popular recently, there are many plugins out there that can provide this functionality, but if you are building a custom theme sometimes this isn’t possible.
Below is an example of how I implemented the infinite scroll and isotope JS packages into a custom theme.
Step 1
Include both infinite scroll and isotope into your file (links below).
Both JS packages are kindly provided by Metafizzy
Step 2
Add CSS. the layout this example is based on is a 3 column masonary vertical layout (example)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | * { box-sizing: border-box; } /* force scrollbar */ html { overflow-y: scroll; } body { font-family: sans-serif; } /* ---- isotope ---- */ /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .grid-item ---- */ .grid-sizer, .grid-item { width: 33.333%; } .grid-item { float: left; display: inline-block; } .grid-item img { display: block; max-width: 100%; } .gutter-sizer{ width:0.5%; } |
Step 3
Add HTML and php. As this is an example for WordPress I have included the loop to fetch the posts.
In this example I have included the filter feature that is in isotope. The filter works on the classes that are attached to the divs around the blog posts. I have added the classes based on categories of the posts, the slugs of the categories are the class names.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <div class="button-group filter-button-group"> <button data-filter="*">Show All</button> <button data-filter=".news">News</button> <button data-filter=".web">Web Sites</button></div> <!--?php //loop for paged blog posts if ( get_query_var( 'paged' ) ) { $paged = get_query_var( 'paged' ); } elseif ( get_query_var( 'page' ) ) { $paged = get_query_var( 'page' ); } else { $paged = 1; } $args = array( 'posts_per_page' =--> 10, 'paged' => $paged, 'order' => 'DESC' ); $posts = new WP_Query($args); if ($posts->have_posts()): echo ' <div class="grid"> <div class="grid-sizer"></div> <div class="gutter-sizer"></div> '; while($posts->have_posts()): $posts->the_post(); $catagory = ""; $cats = get_the_category( $posts->ID); //concat catagories slugs for filter foreach($cats as $cat){ $catagory .= $cat->slug." "; } $image = get_the_post_thumbnail_url( get_the_ID(),"medium'" ); $media = '<img src="'.$image.'" width="100%">'; ?> <div class="grid-item <?php echo $catagory; ?>"> <a href="<?php the_permalink(); ?>"> <!--?php echo $media; ?--> </a></div> <!--?php endwhile; ?--> <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> </div> <nav class="pagination"> <div class="prev-posts-link alignright" style="display:none;"><!--?php echo get_next_posts_link( 'Older Entries', $featured--->max_num_pages ); ?></div> <div class="next-posts-link alignleft" style="display:none;"><!--?php echo get_previous_posts_link( 'Newer Entries' ); ?--></div> </nav> </div> <!--?php else: endif; ?--> |
Step 4
The last part of the example is the JQuery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $('.grid').imagesLoaded(function () { var $grid = $('.grid'); $grid.isotope({ itemSelector: '.grid-item', percentPosition: true, masonry: { columnWidth: '.grid-sizer' } }); var iso = $grid.data('isotope'); $grid.infiniteScroll({ path: 'a.pagination__next', append: '.grid-item', debug: true, status: '.infinite-scroll-request', outlayer: iso } ); // filter items on button click $('.filter-button-group').on('click', 'button', function () { var filterValue = $(this).attr('data-filter'); $grid.isotope({filter: filterValue}); }); }); |
If you have any questions please leave a comment and I will get back to you.
Please have a look at our other examples Click Here