当与Masonry + Bootstrap 4结合使用时，Infinite Scroll不起作用

Question

I'm trying to make photo grid from -- Infinite Scroll v3 + Masonry 4.2.0 + Bootstrap 4 Beta 3

I'm trying to setup it from last 3 days and still it is not working. what's wrong with the code?

I have copied code from example and trying to add Bootstrap into it.

but when I try to use code in my website setup and remove "Codepen Slug" it stop working and do not show loader on page end. and also image grid look only 1 col grid which should be 2 col image grid as per Bootstrap.

1. how to make loader image working on my website?

2. how to make grid look proper 2 col-6 grid?

 // JavaScript/jQuery Document $(document).ready(function() { // jQuery methods go here... //-------------------------------------// // init Masonry var $grid = $('.grid').masonry({ itemSelector: 'none', // select none at first columnWidth: '.grid__col-sizer', gutter: '.grid__gutter-sizer', percentPosition: true, stagger: 30, // nicer reveal transition visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); // get Masonry instance var msnry = $grid.data('masonry'); // initial items reveal $grid.imagesLoaded(function() { $grid.removeClass('are-images-unloaded'); $grid.masonry('option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry('appended', $items); }); //-------------------------------------// // hack CodePen to load pens as pages //-------------------------------------// // init Infinte Scroll $grid.infiniteScroll({ path: '.pagination__next', append: '.grid__item', outlayer: msnry, status: '.page-load-status', }); }); 

 img { border: 0; } .inc-bgia { background-image: url(../images/1.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; height: 100vh; } #inc-tags .inc-tags-active, #inc-tags ul li a:hover { border-bottom: 1px solid #0056b3; color: #0056b3; } .inc-respo { width: 100%; height: auto; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } /* hide by default */ .grid.are-images-unloaded .image-grid__item { opacity: 0; } .page-load-status { display: none; /* hidden by default */ padding-top: 20px; border-top: 1px solid #DDD; text-align: center; color: #777; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> <div class="container mt-4"> <!-- grid --> <div class="grid are-images-unloaded"> <div class="grid__col-sizer col-md-6"></div> <div class="grid__gutter-sizer p-3"></div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> </div> <!-- loader for grid --> <div class="page-load-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="infinite-scroll-last">End of content</p> <p class="infinite-scroll-error">No more pages to load</p> </div> </div> 

Answer 1

when using bootstrap no need of adding gutter so simple removed gutter.

 // JavaScript/jQuery Document $(document).ready(function() { // jQuery methods go here... //-------------------------------------// // init Masonry var $grid = $('.grid').masonry({ itemSelector: 'none', // select none at first columnWidth: '.grid__col-sizer', percentPosition: true, stagger: 30, // nicer reveal transition visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); // get Masonry instance var msnry = $grid.data('masonry'); // initial items reveal $grid.imagesLoaded(function() { $grid.removeClass('are-images-unloaded'); $grid.masonry('option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry('appended', $items); }); //-------------------------------------// // hack CodePen to load pens as pages //-------------------------------------// // init Infinte Scroll $grid.infiniteScroll({ path: '.pagination__next', append: '.grid__item', outlayer: msnry, status: '.page-load-status', }); }); 

 img { border: 0; } .inc-bgia { background-image: url(../images/1.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; height: 100vh; } #inc-tags .inc-tags-active, #inc-tags ul li a:hover { border-bottom: 1px solid #0056b3; color: #0056b3; } .inc-respo { width: 100%; height: auto; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } /* hide by default */ .grid.are-images-unloaded .image-grid__item { opacity: 0; } .page-load-status { display: none; /* hidden by default */ padding-top: 20px; border-top: 1px solid #DDD; text-align: center; color: #777; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> <div class="container mt-4"> <!-- grid --> <div class="grid are-images-unloaded"> <div class="grid__col-sizer col-md-6"></div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> <div class="grid__item col-md-6 p-3"> <a href="#"><img src="http://lorempixel.com/800/500/" alt="Demo" class="inc-respo"></a> </div> </div> <!-- loader for grid --> <div class="page-load-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="infinite-scroll-last">End of content</p> <p class="infinite-scroll-error">No more pages to load</p> </div> </div>