同位素 - 在第一次加載時隱藏元素

按照關於infinite scroll的說明，我可以隱藏第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>

而這裏的the blog。提前致謝！

來源

2012-10-16 Lautaro

如果您想隱藏最初加載的內容，只需隱藏（）您的容器或將其不透明度設置爲0％，直到您想要的任何用戶操作都可以顯示它和內容。 – Systembolaget

@Systembolaget我使用 '' 但首先它開始加載內容，然後隱藏它，然後淡入 – Lautaro

我的意思是 - 在你的CSS你把

#container { 
    display: none; 
}

隱藏默認#container的，所以它不會顯示開始;那麼，在你的腳本，你只要把

$container.show();

在您想要顯示的地步;例如，第一頁的所有內容都已加載或者第一次使用.show（）您的#container時。簡單的例子here。

來源

2012-10-16 17:29:22 Systembolaget

隱藏（）（即顯示：無）的解決方案的小缺點是，這需要在佈局之前發生，因爲同位素沒有佈置隱藏的元素，所以你可以看到最初的「混亂」，我覺得不愉快。更好的解決方案是設置可見性：隱藏，然後執行佈局，然後再以可見性顯示：可見。這也會將容器邊框設置爲所有元素的大小。

來源

2016-11-30 23:48:57 chukko

同位素 - 在第一次加載時隱藏元素

回答

相關問題