帶分頁的同位素佈局？或至少增量加載？

Question

我正在幫助客戶使用在砌體佈局中使用Isotope.js的Wordpress模板。

Isotope.min.js：http://isotope.metafizzy.co/或源代碼在這裏：http://isotope.metafizzy.co/jquery.isotope.js

的基本模板：http://themetrust.com/demos/ink/

的問題是，他們有成百上千，這將需要在該組合使項目顯示它們成爲一個問題。顯然我們不希望他們全部都立即加載。即使採用某種形式的延遲加載，它仍然是一個巨大的規模。

問題：是否有可能改變同位素以包括某種分頁方式？也許一個「點擊這裏加載更多」div沿底部，然後加載下一批項目？或者甚至更好 - 在主循環中的一些東西，以便每20個塊只是說「加載更多項目」，然後單擊它將前19個項目替換爲接下來的19個項目（19個項目+加載更多塊，以便始終有一個網格20）？

基本上，我只是想弄清楚仍然使用Isotope的最佳方式（所以我們不必完全重做客戶端喜歡的模板部分），但是它會逐步加載其項目，以便加載時間和頁面大小受到不利影響。任何幫助將不勝感激！

Answer 1

我面臨同樣的問題，並最終設法爲同位素添加分頁。儘管我的解決方案有效，但在管理大量數據時無關緊要，因爲所有數據都已加載並因此被過濾。

首先，我將我的所有內容分成頁面，併爲每個項目分配匹配的css類（page1，page2，page3，...）。然後我將分頁添加到前端，並使用JavaScript設置了匹配的過濾器。下面是我的TYPO3 Extbase設置一些代碼示例：

PHP在控制器來計算網頁過濾器CSS類：

$itemsPerPage = 6; 
$c = 1; 
$catPages = array(); // needed for categories, so that both filters (page and category) work together 
foreach ($projects AS $key => $project) { 
    $page = ceil($c/$itemsPerPage); 
    $projects[ $key ]->pageClass = 'page' . $page; 
    $c++; 

    // Get all categories of project to calculate the category-related page 
    $cats = $project->getCategories(); 
    foreach ($cats AS $cat) { 
     /* @var $cat \TYPO3\CMS\Extbase\Domain\Model\Category */ 
     $catid = $cat->getUid(); 
     $catPages[ $catid ]++; 
     $catPage = ceil($catPages[ $catid ]/$itemsPerPage); 
     $projects[ $key ]->pageClass .= ' cat' . $catid . 'page' . $catPage; 
    } 
} 
$nrPages = ceil(count($projekts)/$itemsPerPage); 

$nrCatPages = array(); 
foreach ($catPages AS $key => $value) { 
    $object = new \stdClass(); 
    $object->catid = $key; 
    $object->nrPages = ceil($value/$itemsPerPage); 
    $nrCatPages[] = $object; 
} 

$this->view->assign('projects', $projects); 
$this->view->assign('kategorien', $kategorien); 
$this->view->assign('nrPages', $nrPages); 
$this->view->assign('nrCatPages', $nrCatPages); 

有了這個代碼，我把所有的需要的CSS類來計算。

在模板

在我分配的CSS類的每一項，其中已經通過使用<div class="item {project.pageClass}">...

在控制器中計算出的HTML代碼HTML然後我說的HTML碼的分頁：

<div id="pagination-wrap"> 

    <!-- Pagination for all items (no category selected) --> 
    <f:if condition="{nrPages}>1"> 
     <ul class="pagination-cm all"> 
      <li class="pageinfo">Page <span class="currentPage">1</span> of {nrPages}</li> 
      <li class="prev"><a class="page-selector inactive" data-page="prev">&lt;</a></li> 
      <v:iterator.for from="1" to="{nrPages}" iteration="i"> 
       <f:if condition="{i.isFirst}"> 
        <f:then><li><a class="page-selector inactive" data-page-nr="{i.index}" data-page="page{i.index}">{i.index}</a></li></f:then> 
        <f:else><li><a class="page-selector" data-page-nr="{i.index}" data-page="page{i.index}">{i.index}</a></li></f:else> 
       </f:if> 
      </v:iterator.for> 
      <li class="next"><a class="page-selector" data-page="next">&gt;</a></li> 
     </ul> 
    </f:if> 

    <!-- Paginations for each category --> 
    <f:if condition="{nrCatPages}"> 
     <f:for each="{nrCatPages}" as="catpages"> 
      <f:if condition="{catpages.nrPages}>1"> 
       <ul class="pagination-cm category cat{catpages.catid}"> 
        <li class="pageinfo">Page <span class="currentPage">1</span> of {catpages.nrPages}</li> 
        <li class="prev"><a class="page-selector inactive" data-page="prev">&lt;</a></li> 
        <v:iterator.for from="1" to="{catpages.nrPages}" iteration="i"> 
         <f:if condition="{i.isFirst}"> 
          <f:then><li><a class="page-selector inactive" data-page-nr="{i.index}" data-page="cat{catpages.catid}page{i.index}">{i.index}</a></li></f:then> 
          <f:else><li><a class="page-selector" data-page-nr="{i.index}" data-page="cat{catpages.catid}page{i.index}">{i.index}</a></li></f:else> 
         </f:if> 
        </v:iterator.for> 
        <li class="next"><a class="page-selector" data-page="next">&gt;</a></li> 
       </ul> 
      </f:if> 
     </f:for> 
    </f:if> 

</div> 

的JavaScript

最後，我只需要下面的JavaScript，使分頁有功能與同位素（所有的JS，沒有必要的頁面重新加載！）：

jQuery(document).ready(function() { 
    /* Isotope Pagination */ 
    var $container = jQuery('.portfolio'); 
    // start by showing page 1 on page load 
    $container.isotope({ 
     filter: '.page1' 
    }); 

    /* when changing category, display correct pagination */ 
    jQuery('.port-filter li a').click(function() { 
     jQuery('.pagination-cm').hide(); 
     var pagination = jQuery(this).parent().attr("data-pagination"); 
     jQuery('.pagination-cm.' + pagination).find("li.pageinfo > span.currentPage").text(1); 
     jQuery('.pagination-cm.' + pagination).show(); 
     refreshPagination(); 
    }); 

    /* when pagination item is clicked, use isotope filter to show correct items */ 
    jQuery('.portfolio-container').on('click', '.page-selector:not(.inactive)', function() { 
     var $pagination = jQuery(this).closest("ul"); 
     var $currentPage = $pagination.find("li.pageinfo > span.currentPage"); 
     var page = jQuery(this).attr("data-page"); 
     var current = parseInt($currentPage.text()); 

     var newPage = 1; 
     if (page == 'next') { 
      newPage = current + 1; 
      page = (($pagination.find("li:not(.next):not(.prev) .page-selector").attr("data-page")).slice(0, -1) + newPage); 
     } 
     else if (page == 'prev') { 
      newPage = current - 1; 
      page = (($pagination.find("li:not(.next):not(.prev) .page-selector").attr("data-page")).slice(0, -1) + newPage); 
     } 
     else { 
      newPage = jQuery(this).text(); 
     } 

     $currentPage.text(newPage); 
     $container.isotope({ 
      filter: '.' + page, 
      animationOptions: { 
       duration: 750, 
       easing: 'linear', 
       queue: false 
      }, 
      layoutMode: 'fitRows' 
     }); 

     refreshPagination(); 

     return false; 
    }); 

    /* refresh pagination display: disable current page button and prev/next buttons if necessary */ 
    function refreshPagination() { 
     jQuery('.portfolio-container .pagination-cm:visible').each(function (index, value) { 
      var $pagination = jQuery(value); 
      var currentPage = parseInt($pagination.find("li.pageinfo > span.currentPage").text()); 
      $pagination.find("a.page-selector").removeClass("inactive"); 

      // Aktuelle Seite 
      $pagination.find("li a.page-selector[data-page-nr=" + currentPage + "]").addClass("inactive"); 

      // Prev-Button 
      if (currentPage == 1) $pagination.find("li.prev a.page-selector").addClass("inactive"); 
      else $pagination.find("li.prev a.page-selector").removeClass("inactive"); 

      // Next-Button 
      var lastPage = $pagination.find("li:not(.next):last .page-selector").attr("data-page-nr"); 
      if (currentPage < lastPage) $pagination.find("li.next a.page-selector").removeClass("inactive"); 
      else $pagination.find("li.next a.page-selector").addClass("inactive"); 
     }); 
    } 

}); 

就像我說這是來自TYPO3上下文。我在基於extbase的自定義擴展中實現了此代碼。這些代碼片段不會隨意移植到其他項目中，但我希望它們仍然會有所幫助。