2

我开始在我的项目中使用很棒的 JQuery Isotope 插件。一切都很好，但我遇到了corner-stapm选项的一个问题。

我的 masnory 网格中的每个元素都有固定宽度（220px + 5 边距）和随机高度（取决于其内容），我在 CSS 文件中使用@media 查询来更改不同屏幕分辨率上的列数（页面宽度可以是 230、460 , 690.. 等）。

角落印章的问题出现在最窄的版本（一列）中 - 角落印章被同位素元素覆盖......

在这个演示中，同位素官方页面上也出现了同样的问题：http: //isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html（当窗口变窄时，大红色矩形隐藏在其他同位素元素后面） .

我发现它可以像在 Masnory 插件演示站点中一样正常工作！ http://masonry.desandro.com/demos/corner-stamp.html

我已经结合将站点脚本从 Masnory 复制到 Isotope，但没有运气，因为我不太擅长 JS/jQuery：/

让它在 Isotope 中工作会很棒，因为我希望我的网站有过滤选项（在 Masnory 插件中不可用）。

4

1 回答 1

9

问题出在 Isotope.prototype 脚本中...使用以下脚本：

$.Isotope.prototype._masonryReset = function() {
    // layout-specific props
    this.masonry = {};
    this._getSegments();
    var i = this.masonry.cols;
    this.masonry.colYs = [];
    while (i--) {
        this.masonry.colYs.push( 0 );
    }

    if ( this.options.masonry.cornerStampSelector ) {
        var $cornerStamp = this.element.find( this.options.masonry.cornerStampSelector ),
            stampWidth = $cornerStamp.outerWidth(true) - ( this.element.width() % this.masonry.columnWidth ),
        cornerCols = Math.ceil( stampWidth / this.masonry.columnWidth ),
        cornerStampHeight = $cornerStamp.outerHeight(true);

        for ( i = ( this.masonry.cols - cornerCols ); i < this.masonry.cols; i++ ) {
            this.masonry.colYs[i] = cornerStampHeight;
        }
    }
};

您会注意到“for”调用的调整，该函数不应该使用 Math.max（不需要）。

于 2012-02-23T18:21:58.503 回答