默认过滤项

Question

我有一个像这样的页面： http://www.sungeetheme.com/html/our_gallery_3_colums.html

在过滤图库中，默认项目是＆＃34;全部＆＃34;

如何在页面加载时将默认值更改为其他内容，例如：Portrait？

我尝试在代码部分更改变量dataFilterVal来自＆＃34; All＆＃34;别的东西，但效果不好

var masonryFilter = {
    massMasonry: [],
    dataFilterVal: "all",
    init: function () {
        var self = this;
        self.filterEl('.j-filter', '~ .j-filter-content');
        self.masonry();
    },
    masonry: function () {
        var self = this;
        var msnry;
        var i = 0;
        $('.j-masonry').each(function () {
            var el = $(this),
                newClass = 'j-masonry-' + i;

            el.addClass(newClass).attr('data-masonry-id', i);
            i++;
            el.imagesLoaded(function () {
                var container = document.querySelector('.' + newClass);

                msnry = new Masonry(container,
                    {
                        itemSelector: '.j-masonry-item',
                        columnWidth: '.' + newClass + ' .masonry-gridSizer',
                        transitionDuration: '1.2s'
                    });
                self.massMasonry.push(msnry);
                el.data('masonry', msnry);
            });
        });
    },
    filterEl: function (filterNav, filterContent) {
        var self = this;
        $(filterNav + ' a').click(function (e) {
            e.preventDefault();
            var el = $(this);
            var activeClass = "is-category-filter-active";
            var activeContainer = $(filterContent, $(this).parents(filterNav)).eq(0);
            console.log(activeContainer);
            $('li', $(this).parents(filterNav)).removeClass(activeClass);
            el.closest('li').addClass(activeClass);
            self.dataFilterVal = el.attr('data-filter');
            self.filterStart(self.dataFilterVal, activeContainer);
        });
    },
    filterStart: function (dataFilterVal, filterContent) {
        var self = this;
        if (dataFilterVal == "all") {
            $('[class*="j-filter-"]', filterContent).show().stop(true, false).animate({
                opacity: 1
            }, 400);
        } else {
            var hideItems = $('[class*="j-filter-"]', filterContent).not(dataFilterVal);
            hideItems.stop(true, false).animate({
                opacity: 0
            }, 400);
            setTimeout(function () {
                hideItems.hide();
            }, 301);
            $(dataFilterVal, filterContent).show().stop(true, false).animate({
                opacity: 1
            }, 400);
        }
        setTimeout(function () {
            var masonryId = $(filterContent).find('.j-masonry').attr('data-masonry-id');
            self.massMasonry[masonryId].layout();
        }, 501);
    }
};
masonryFilter.init();