Question

我正在帮助客户使用在砌体布局中使用Isotope.js的Wordpress模板。

Isotope.min.js：http://isotope.metafizzy.co/或源代码：http://isotope.metafizzy.co/jquery.isotope.js

问题是他们有数百个项目需要在该组合中，因此显示它们成为一个问题。显然我们不希望所有这些都立刻加载。即使集成了某种形式的延迟加载，它仍然是一个巨大的尺寸。

问题：是否可以改变同位素以包含某种分页？也许在最底部“点击这里加载更多”div然后加载下一批项目？或者甚至更好 - 在主循环中的某些内容，以便每20个块只显示“加载更多项目”并单击它将前19个项目替换为接下来的19个项目（19个项目+加载更多块），以便总是有一个网格20）？

基本上，我只想弄清楚仍然使用Isotope的最佳方式（所以我们不必完全重做客户喜欢的模板部分），但让它逐步加载它的项目，以便加载时间和页面大小受到不利影响。任何帮助将不胜感激！

Answer 1

我遇到了同样的问题，最终设法为同位素添加了分页。虽然我的解决方案有效，但在管理大数据时没有用，因为所有数据都已加载并因此被过滤。

首先，我将所有内容分成了几页，并为每个项目分配了匹配的css类（page1，page2，page3，...）。然后我在前端添加了分页，并使用JavaScript设置匹配过滤器。以下是我的TYPO3 Extbase设置中的一些代码示例：

Controller中的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类。

模板中的HTML

在HTML代码中，我为每个项目分配了CSS类，这是使用<div class="item {project.pageClass}">...

在控制器中计算的

然后我添加了分页的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的自定义扩展中实现了此代码。这些代码片段无法在没有调整的情况下移植到其他项目中，但我希望它们仍然有用。

具有分页的同位素布局？或者至少增量加载？

1 个答案: