jQuery Isotope - 角落邮票问题

时间:2012-01-24 23:46:19

标签: jquery jquery-plugins jquery-masonry jquery-isotope

我开始在我的项目中使用awsome JQuery Isotope插件。一切都很好,但是我遇到了一个有问题的选择。

我的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插件中不可用)。

1 个答案:

答案 0 :(得分: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;
        }
    }
};

你会注意到&#34; for&#34;的调整。调用时,函数不应该使用Math.max(不需要)。