1

我一直在研究这个 tumblr 主题

http://pncawebteam.tumblr.com/

在初始加载的项目上一切正常，但是当无限滚动附加新的照片帖子时，他们没有应用 lightzap 灯箱。加载这些新项目后如何重新触发该库？这是我的附加内容和我正在使用的库。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://pnca.edu/tumblr_assets/js/imagesloaded.pkgd.js"></script>
<script src="http://pnca.edu/tumblr_assets/js/masonry.pkgd.js"></script>
<script src="http://pnca.edu/tumblr_assets/js/jquery.infinitescroll.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>

<script>
$(function(){

var $container = $('#posts');

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.item',
    columnWidth: 30,
    "gutter": 5
  });
});

$container.infinitescroll({
  navSelector  : '.jump_page',    
  nextSelector : '#newContent a',  
  itemSelector : '.item',     
  loading: {
      finishedMsg: 'No more pages to load.',
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    var $newElems = $( newElements ).css({ opacity: 0 });
    $newElems.imagesLoaded(function(){
      $newElems.animate({ opacity: 1 });
      $container.masonry( 'appended', $newElems, true ); 
    });
  }
);

 });

4

0 回答 0