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

时间：2018-01-07 12:42:58

标签： jquery infinite-scroll jquery-masonry masonry jquery-infinite-scroll

我试图制作照片网格 - Infinite Scroll v3 + Masonry 4.2.0 + Bootstrap 4 Beta 3

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

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

但是当我尝试在我的网站设置中使用代码并删除＆＃34; Codepen Slug＆＃34;它停止工作，不在页面结束时显示加载程序。并且图像网格看起来只有1个col网格，根据Bootstrap应该是2 col图像网格。

  1. 如何在我的网站上运行装载程序图像？

  2. 如何使网格看起来正确2 col-6网格？

    3. ＆＃13;
    ＆＃13; 
    // 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',
  });

});
    ＆＃13; 
    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;
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

1 个答案:

答案 0 :(得分：0)

使用bootstrap时无需添加排水沟，只需简单地移除排水沟。

＆＃13;
＆＃13; 
// 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',
  });

});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题