0

按照这个关于无限滚动的说明，我能够隐藏第 2、3、4 页等中的新内容，直到它完成加载然后制作动画。现在我想实现这些相同的效果，但主要内容是第一页。有什么帮助吗？我正在使用的代码：

<script>
    $(function(){
      var $container = $('#boxes');
      $container.imagesLoaded( function(){
        $container.isotope({
          itemSelector : '.box' 
        });
      });  
</script>

<script>
$('#boxes').isotope({ 
 // options
   itemSelector : '.box',
   layoutMode : 'masonry'
    masonry : {
          columnWidth : 325
        },
});
</script>

<script>
   $(function(){
             var $container = $('#boxes');
             $container.imagesLoaded(function(){
                 $container.isotope({
                     itemSelector: '.box'
                 });
             });
              $container.infinitescroll({
        navSelector  : '#navigation',   
        nextSelector : '#navigation a#next', 
        itemSelector : '.box',    

        loading: {
            finishedMsg: 'no more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
                 }
             },
             function(newElements){ 
                 var $newElems = jQuery( newElements ).hide()
                 console.log('Elements Retrieved:');
                 var $newElems = $(newElements);
                 $container.imagesLoaded(function(){
                     $newElems.fadeIn(); // fade in when ready
           $container.isotope('appended', $newElems, function(){console.log('Appended');});
                 });
             });
         });

  </script>

这是博客。提前致谢！

4

2 回答 2

5

我的意思是 - 在你的 CSS 中

#container {
    display: none;
}

默认情况下隐藏#container，因此最初不会显示；然后，在您的脚本中，您只需输入

$container.show();

在你想展示的地方；例如，当第一页的所有内容都已加载时，或者当您第一次想要 .show() #container 时。简单的例子在这里。

于 2012-10-16T17:29:22.440 回答
0

hide() 解决方案的小缺点（即显示：无）是这需要在布局之前发生，因为同位素不会布置隐藏元素，所以你可以在一瞬间看到最初的“混乱”，我发现不愉快。更好的解决方案是设置可见性：隐藏，然后进行布局，然后以可见性再次显示：可见。这还将容器边框设置为所有元素的大小。

于 2016-11-30T23:48:57.393 回答