Question

我刚买了一个模板，现在我发现其中一个页面的功能无效

正如您在此页面中看到的那样：

http://ava-themes.com/HTML/Brander/Brander/blog-masonry-full-width.html

如果你一直点击过滤器按钮，列的宽度会变得越来越小，直到列变得非常可怕

这是有bug的javascript函数，我无法找到问题...

//Masonery
$(window).load(function() {
    $(function() {

        $.Isotope.prototype._getCenteredMasonryColumns = function() {
            this.width = this.element.width();
            var parentWidth = this.element.parent().width();
            // i.e. options.masonry && options.masonry.columnWidth
            var colW = this.options.masonry && this.options.masonry.columnWidth ||
            // or use the size of the first item
            this.$filteredAtoms.outerWidth(true) ||
            // if there's no items, use size of container
            parentWidth;
            var cols = Math.floor(parentWidth / colW);
            cols = Math.max(cols, 1);
            // i.e. this.masonry.cols = ....
            this.masonry.cols = cols;
            // i.e. this.masonry.columnWidth = ...
            this.masonry.columnWidth = colW;
        };

        $.Isotope.prototype._masonryReset = function() {
            // layout-specific props
            this.masonry = {};
            // FIXME shouldn't have to call this again
            this._getCenteredMasonryColumns();
            var i = this.masonry.cols;
            this.masonry.colYs = [];
            while (i--) {
                this.masonry.colYs.push(0);
            }
        };

        $.Isotope.prototype._masonryResizeChanged = function() {
            var prevColCount = this.masonry.cols;
            // get updated colCount
            this._getCenteredMasonryColumns();
            return (this.masonry.cols !== prevColCount);
        };

        $.Isotope.prototype._masonryGetContainerSize = function() {
            var unusedCols = 0,
                i = this.masonry.cols;
            // count unused columns
            while (--i) {
                if (this.masonry.colYs[i] !== 0) {
                    break;
                }
                unusedCols++;
            }
            return {
                height: Math.max.apply(Math, this.masonry.colYs),
                // fit container to columns that have been used;
                width: (this.masonry.cols - unusedCols) * this.masonry.columnWidth
            };
        };


        var $container = $('#container'),
            $body = $('body'),
            colW = 1,
            columns = null;

        $container.isotope({
            // disable window resizing
            resizable: false,
            masonry: {
                columnWidth: colW
            }
        });

        //FILTERING
        $('#filters a').click(function() {
            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector
            });
            return false;
        });
    });
});
///End masonery

Answer 1

我不确定导致#container宽度缩小的原因。看起来这里完成的计算是错误的。

尝试调试此方法$.Isotope.prototype._masonryGetContainerSize

我现在建议的一个好的临时解决方法是将style.css中width的{{1}}设置为#container。这似乎可以完成这项工作。

javascript函数问题与模板

1 个答案: