结合Masonry+Bootstrap 4时Infinite Scroll失效的问题排查

嘿，折腾三天确实够闹心的，我帮你搞定这两个问题！

一、修复Bootstrap 2列网格布局问题 #

你的网格变成1列，核心原因是Bootstrap栅格系统需要.row容器来管理列布局，同时Masonry的配置需要和Bootstrap的栅格规则对齐：

1. 给.grid容器添加.row类，让它成为Bootstrap的栅格行容器，这样col-md-6才能正确按2列排列
2. 调整Masonry的gutter配置，匹配Bootstrap的默认栅格间距，避免布局错位

二、修复底部加载器不显示问题 #

加载器没动静主要是两个小问题：

1. 你CSS里直接把.page-load-status设为display: none，Infinite Scroll没法控制它的显示状态
2. 配置的path: '.pagination__next'在页面中找不到对应元素，导致Infinite Scroll直接判定没有更多内容，触发隐藏状态

修改后的完整代码 #

HTML

<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 添加了row类 -->
  <div class="grid row are-images-unloaded">
    <div class="grid__col-sizer col-md-6"></div>
    <!-- 调整gutter匹配Bootstrap栅格间距 -->
    <div class="grid__gutter-sizer col-0"></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>
    <!-- 以下grid__item保持原结构不变 -->
    <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>

CSS

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;
}
/* 移除默认隐藏，交给Infinite Scroll控制显示 */
.page-load-status {
  padding-top: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
}
/* 加载器元素默认隐藏，请求时显示 */
.loader-ellips, .infinite-scroll-last, .infinite-scroll-error {
  display: none;
}
.infinite-scroll-request .loader-ellips {
  display: block;
}
.infinite-scroll-last.infinite-scroll-last, .infinite-scroll-error.infinite-scroll-error {
  display: block;
}

JavaScript

$(document).ready(function() {
  // 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);
  });

  // init Infinite Scroll
  $grid.infiniteScroll({
    // 测试用模拟分页路径，实际项目替换为你的分页链接选择器或动态路径
    path: function() {
      return 'page' + (this.pageIndex + 1) + '.html';
    },
    append: '.grid__item',
    outlayer: msnry,
    status: '.page-load-status',
    // 开启debug模式查看控制台日志，方便调试
    debug: true
  });
});

额外提示 #

• 如果你是服务器端分页，记得在页面中添加分页链接，比如：<a class="pagination__next" href="/page2">Next page</a>，这样Infinite Scroll就能正确识别下一页路径
• 测试加载器时，可以创建几个测试页面（page1.html、page2.html等），每个页面放几个.grid__item，就能看到滚动加载的完整效果了

内容的提问来源于stack exchange，提问作者Archi Patel