jQuery同位素-角落邮票发行

Question

我开始在我的项目中使用awsome同位素插件。一切都很好，但是我有一个关于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插件中不可用)。

Answer 1

问题出现在Isotope.prototype script...use中，如下所示：

$.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 (不需要)。