与 Masonry + Bootstrap 4 结合使用时，无限滚动不起作用

Question

我正在尝试从 -- Infinite Scroll v3 + Masonry 4.2.0 + Bootstrap 4 Beta 3

制作照片网格

我在过去 3 天尝试设置它，但它仍然无法正常工作。代码有什么问题？

我已经从 example 复制了代码并尝试将 Bootstrap 添加到其中。

但是当我尝试在我的网站设置中使用代码并删除 "Codepen Slug" 它停止工作并且不在页面末尾显示加载程序。而且图像网格看起来只有 1 列网格，根据 Bootstrap.

应该是 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

使用 bootstrap 时无需添加装订线，删除装订线很简单。

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

与 Masonry + Bootstrap 4 结合使用时，无限滚动不起作用

Infinite Scroll not working when combine with Masonry + Bootstrap 4

jquery

jquery-masonry

infinite-scroll

masonry

jquery-infinite-scroll