Question

我搜索了几乎每个论坛，并找到了几种方法来制作Isotope砌体布局，并使用Infinite Scroll运行Wordpress进行过滤。而且他们似乎都没有给我我正在寻找的东西。

目前我通过过滤让砌体布局正常工作。当我实现Infinite Scroll时，它会将内容加载到其他内容下面，这是使用Isotope和Infinite滚动的一个非常常见的问题。但是，在应用.appended method以便将新加载的帖子排序到我的网站时，它会弄乱我的整个布局。

我怀疑我没有在正确的位置进入.appended线。这是没有.append的我的js：

$(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命令吗？

带有同位素的无限滚动和在Wordpress中过滤

0 个答案: