3

我几乎搜索了那里的每个论坛，并找到了几种方法来制作同位素砌体布局，并使用运行 Wordpress 的 Infinite Scroll 进行过滤。他们似乎都没有给我我想要的东西。

目前，我得到了 Masonry 布局，并进行了过滤。当我实现无限滚动时，它会将内容加载到其他内容下方，这是使用同位素和无限滚动的一个非常常见的问题。但是，当应用.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