3

私はそこにあるほぼすべてのフォーラムを検索し、Wordpress を実行している無限スクロールでフィルタリング作業を行う Isotope 石積みレイアウトを作成するいくつかの方法を見つけました。そして、私が探しているものを私に与えてくれる人は誰もいないようです。

現時点では、フィルタリングを使用してMasonryレイアウトが機能しています。Infinite Scroll を実装すると、他のコンテンツの下にコンテンツが読み込まれます。これは、Isotope と Infinite Scroll での作業でよくある問題です。ただし、新しく読み込まれた投稿をサイトに並べ替えるために.appended メソッドを適用すると、レイアウト全体が台無しになります。

正しい場所で .appended 行に入っていないのではないかと思います。のない私のjsは次の.appendとおりです。

$(function () {
    var $page = $('#page')
});

$(function () {
    var $container = $('#content'),
            filters = {},
            // get filter from hash, remove leading '#'
            filterSelector = window.location.hash.slice(1);

    $container.imagesLoaded(function () {
        // bind isotope to window resize
        $(window).smartresize(function () {
            // jQuery has issues with percentage widths
            // so we'll manually calulate it
            var colW = Math.floor($container.width() * 0.49);

            $container.isotope({
            });
            // trigger resize so isotope layout is triggered
        }).smartresize();
    });

    $('#nav a').click(function () {
        // store filter value in object
        // i.e. filters.color = 'red'
        var $this = $(this),
                name = $this.attr('data-filter-name'),
                value = $this.attr('data-filter-value'),
                isoFilters = [],
                filterName, prop;

        filters[ name ] = value;

        for (prop in filters) {
            isoFilters.push(filters[ prop ]);
        }

        var filterSelector = isoFilters.join('');

        // trigger isotope if its ready
        if ($container.data('isotope')) {
            $container.isotope({filter: filterSelector});
        }

        window.location.hash = filterSelector;

        // toggle highlight
        $this.parents('ul').find('.selected').removeClass('selected');
        $this.parent().addClass('selected');

        return false;

    });

    // if there was a filter, trigger a click on the 
    // corresponding option
    if (filterSelector) {
        var selectorClasses = filterSelector.split('.').slice(1);
        $.each(selectorClasses, function (i, selectorClass) {
            $('#nav a[data-filter-value=".' + selectorClass + '"]').click();
        });
    }

    $container.isotope({
        itemSelector: '.box',
        filter: filterSelector,
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });
});

#nav私のメニューで#contentあり、私のコンテナであり.box、私の投稿です。

.appendedコマンドを挿入する必要がある場所について誰かアドバイスしてもらえますか?

4

0 に答える 0