Question

需要帮助以下错误的infinte-scroll。我在同一页面有两个不同的部分。我需要显示具有masonary效果的AJAX列表。但得到以下错误。

infinite-scroll.pkgd.min.js：12未捕获TypeError：o._init不是函数在HTMLDivElement。（https://unpkg.com/infinite-scroll@3.0.0/dist/infinite-scroll.pkgd.min.js:12:660）

codepen sample

StudentSchema.post('save', function(doc) {
  Teacher.findOneAndUpdate({_id: <your teacher id>}, <your student object>, callback);
});

$(function(){
  
$('#destroy').click(function() {
  //$('.grid_b').infiniteScroll('destroy');
  
    var $grid = $('.grid').masonry({
  itemSelector: '.photo_b-item',
  columnWidth: '.grid_b__col-sizer',
  gutter: '.grid_b__gutter-sizer',
  percentPosition: true,
  stagger: 30,
  // nicer reveal transition
  visibleStyle: { transform: 'translateY(0)', opacity: 1 },
  hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});

//------------------//

// Get an API key for your demos at https://unsplash.com/developers
var unsplashID = '9ad80b14098bcead9c7de952435e937cc3723ae61084ba8e729adb642daf0251';

// get Masonry instance
var msnry = $grid.data('masonry');

$grid.infiniteScroll({
  // use path string with {{#}} for page number
  path: 'https://api.unsplash.com/photos?page={{#}}&client_id=' + unsplashID,
  // load response as flat text
  responseType: 'text',
  outlayer: msnry,
  status: '.page-load-status',
  history: false,
});

$grid.on( 'load.infiniteScroll', function( event, response ) {
  console.log( response )
  // parse response into JSON data
  var data = JSON.parse( response );
  // compile data into HTML
  var itemsHTML = data.map( getItemHTML ).join('');
  // convert HTML string into elements
  var $items = $( itemsHTML );
  // append item elements
  $items.imagesLoaded( function() {
    $grid.infiniteScroll( 'appendItems', $items )
      .masonry( 'appended', $items );
  })
});

// load initial page
$grid.infiniteScroll('loadNextPage');

//------------------//

var itemTemplateSrc = $('#photo-item-template').html();

function getItemHTML( photo ) {
  return microTemplate( itemTemplateSrc, photo );
}

// micro templating, sort-of
function microTemplate( src, data ) {
  // replace {{tags}} in source
  return src.replace( /\{\{([\w\-_\.]+)\}\}/gi, function( match, key ) {
    // walk through objects to get value
    var value = data;
    key.split('.').forEach( function( part ) {
      value = value[ part ];
    });
    return value;
  });
}
  
});


$('#n_photo').click(function() {
  var $grid = $('.grid').masonry({
  itemSelector: '.photo-item',
  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 an API key for your demos at https://unsplash.com/developers
var unsplashID = '9ad80b14098bcead9c7de952435e937cc3723ae61084ba8e729adb642daf0251';

// get Masonry instance
var msnry = $grid.data('masonry');

$grid.infiniteScroll({
  // use path string with {{#}} for page number
  path: 'https://api.unsplash.com/photos?page={{#}}&client_id=' + unsplashID,
  // load response as flat text
  responseType: 'text',
  outlayer: msnry,
  status: '.page-load-status',
  history: false,
});

$grid.on( 'load.infiniteScroll', function( event, response ) {
  console.log( response )
  // parse response into JSON data
  var data = JSON.parse( response );
  // compile data into HTML
  var itemsHTML = data.map( getItemHTML ).join('');
  // convert HTML string into elements
  var $items = $( itemsHTML );
  // append item elements
  $items.imagesLoaded( function() {
    $grid.infiniteScroll( 'appendItems', $items )
      .masonry( 'appended', $items );
  })
});

// load initial page
$grid.infiniteScroll('loadNextPage');

//------------------//

var itemTemplateSrc = $('#photo-item-template').html();

function getItemHTML( photo ) {
  return microTemplate( itemTemplateSrc, photo );
}

// micro templating, sort-of
function microTemplate( src, data ) {
  // replace {{tags}} in source
  return src.replace( /\{\{([\w\-_\.]+)\}\}/gi, function( match, key ) {
    // walk through objects to get value
    var value = data;
    key.split('.').forEach( function( part ) {
      value = value[ part ];
    });
    return value;
  });
}
  
});

  
  
});

body {
  font-family: sans-serif;
  line-height: 1.4;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.grid__col-sizer,
.photo-item {
  width: 32%;
}

.grid__gutter-sizer {
  width: 2%;
}

.photo-item {
  margin-bottom: 10px;
  float: left;
}

.photo-item__image {
  display: block;
  max-width: 100%;
}

.photo-item__caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin: 0;
}

.photo-item__caption a {
  color: white;
  font-size: 0.8em;
  text-decoration: none;
}

.page-load-status {
  display: none; /* hidden by default */
  padding-top: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
}

/* loader ellips in separate pen CSS */

Answer 1

经过长时间的研究，我实现了我所需要的东西。这很简单。只需按照代码。请问我是否有人需要帮助。

＆＃13;

$(function(){
  
$('#destroy').click(function() {

  			$('.grid').html('<div class="grid__col-sizer"></div>\
				<div class="grid__gutter-sizer"></div>');
  $('.grid').infiniteScroll('destroy');
  $('.grid').data('infiniteScroll', null);
  
  var $grid = $('.grid').masonry({
  itemSelector: '.photo-item',
  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 },
});

  var unsplashID = '9ad80b14098bcead9c7de952435e937cc3723ae61084ba8e729adb642daf0251';
  
  // get Masonry instance
var msnry = $grid.data('masonry');

  
  	setTimeout(function(){
		console.warn('timeout')
      
$('.grid').infiniteScroll({
  // use path string with {{#}} for page number
  path: 'https://api.unsplash.com/photos?page={{#}}&client_id=' + unsplashID,
  // load response as flat text
  responseType: 'text',
  outlayer: msnry,
  status: '.page-load-status',
  history: false,
});
      var infScroll = $('.grid').data('infiniteScroll');

$('.grid').on( 'append.infiniteScroll', function( event, response, path ) {
  
		console.log( 'Loaded: ' + path,
			'Current page: ' + infScroll.pageIndex,
			infScroll.loadCount + ' pages loaded'
			);
  // parse response into JSON data
  var data = JSON.parse( response );
  // compile data into HTML
  var itemsHTML = data.map( getItemHTML ).join('');
  // convert HTML string into elements
  var $items = $( itemsHTML );
  // append item elements
  $items.imagesLoaded( function() {
    $grid.infiniteScroll( 'appendItems', $items )
      .masonry( 'appended', $items );
  })
});

// load initial page
$('.grid').infiniteScroll('loadNextPage');

//------------------//

var itemTemplateSrc = $('#photo-item-template').html();

function getItemHTML( photo ) {
  return microTemplate( itemTemplateSrc, photo );
}

// micro templating, sort-of
function microTemplate( src, data ) {
  // replace {{tags}} in source
  return src.replace( /\{\{([\w\-_\.]+)\}\}/gi, function( match, key ) {
    // walk through objects to get value
    var value = data;
    key.split('.').forEach( function( part ) {
      value = value[ part ];
    });
    return value;
  });
}
  

      
      }, 1000,function(){
  console.warn('timeoutCallback')
});

}); //Destroy CLICK


$('#n_photo').click(function() {
   //$('.grid').infiniteScroll('destroy');
  var $grid = $('.grid').masonry({
  itemSelector: '.photo-item',
  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 an API key for your demos at https://unsplash.com/developers
var unsplashID = '9ad80b14098bcead9c7de952435e937cc3723ae61084ba8e729adb642daf0251';



$('.grid').infiniteScroll({
  // use path string with {{#}} for page number
  path: 'https://api.unsplash.com/photos?page={{#}}&client_id=' + unsplashID,
  // load response as flat text
  responseType: 'text',
  status: '.page-load-status',
  history: false,
});

$('.grid').on( 'load.infiniteScroll', function( event, response, path ) {
  
var data = JSON.parse( response );
  // compile data into HTML
  var itemsHTML = data.map( getItemHTML ).join('');
  // convert HTML string into elements
  var $items = $( itemsHTML );
  // append item elements
  $items.imagesLoaded( function() {
    $grid.infiniteScroll( 'appendItems', $items )
      .masonry( 'appended', $items );
  })
});

// load initial page
$('.grid').infiniteScroll('loadNextPage');

//------------------//

var itemTemplateSrc = $('#photo-item-template').html();

function getItemHTML( photo ) {
  return microTemplate( itemTemplateSrc, photo );
}

// micro templating, sort-of
function microTemplate( src, data ) {
  // replace {{tags}} in source
  return src.replace( /\{\{([\w\-_\.]+)\}\}/gi, function( match, key ) {
    // walk through objects to get value
    var value = data;
    key.split('.').forEach( function( part ) {
      value = value[ part ];
    });
    return value;
  });
}
  
});

  
  
});

＆＃13;

body {
  font-family: sans-serif;
  line-height: 1.4;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.grid__col-sizer,
.photo-item {
  width: 32%;
}

.grid__gutter-sizer {
  width: 2%;
}

.photo-item {
  margin-bottom: 10px;
  float: left;
}

.photo-item__image {
  display: block;
  max-width: 100%;
}

.photo-item__caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin: 0;
}

.photo-item__caption a {
  color: white;
  font-size: 0.8em;
  text-decoration: none;
}

.page-load-status {
  display: none; /* hidden by default */
  padding-top: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
}

/* loader ellips in separate pen CSS */

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<h1>Infinite Scroll - Loading JSON + Masonry</h1>

<p>Loading photos from the <a href="https://unsplash.com/developers?utm_source=infinite-scroll-demos&utm_medium=referral&utm_campaign=api-credit">Unsplash API</a></p>
<button id="n_photo" >check</button>
<button id="destroy" >Destroy</button>
<div class="grid">
  <div class="grid__col-sizer"></div>
  <div class="grid__gutter-sizer"></div>
</div>

<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>


<!-- .photo-item template HTML -->
<script type="text/html" id="photo-item-template">
  <div class="photo-item">
    <img class="photo-item__image" src="{{urls.regular}}" alt="Photo by {{user.name}}" />
    <p class="photo-item__caption">
      <a href="{{user.links.html}}?utm_source=infinite-scroll-demos&utm_medium=referral&utm_campaign=api-credit">{{user.name}}</a>
    </p>
  </div>
</script>

＆＃13;

需要有关使用masonary重新初始化无限滚动的帮助

1 个答案: