當與Masonry + Bootstrap 4結合使用時，Infinite Scroll不起作用

Question

我正在嘗試從-Infinite Scroll v3 + Masonry 4.2.0 + Bootstrap 4 Beta 3制作照片網格

我正在嘗試從最近3天開始進行設置，但仍然無法正常工作。 代碼有什么問題？

我已經從示例復制了代碼，並嘗試將Bootstrap添加到示例中 。

但是，當我嘗試在網站設置中使用代碼並刪除“ Codepen Slug”時，它將停止工作，並且在頁面末尾不顯示加載程序。 並且圖像網格看起來僅是1 col網格，按照Bootstrap來說應該是2 col圖像網格。

1. 如何使裝載機圖像在我的網站上正常工作？

2. 如何使網格看起來合適2 col-6網格？

 // 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

使用引導程序時，無需添加裝訂線，因此可以簡單地刪除裝訂線。

 // 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>