当与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>