jQuery Isotope-角印发行 [英] jQuery Isotope - corner stamp issue

问题描述

我开始在项目中使用可怕的JQuery Isotope插件.一切都很好，但是我遇到了Corner-stapm选项的问题.

I started using awsome JQuery Isotope plugin in my project. Everything works great, but I'm having one issue with corner-stapm option.

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

Each element in my masnory grid has fixed width (220px + 5 margin) and random height (depending on its content) and I am using @media queries in CSS file to change columns number on different screen resolution (page width can be 230, 460, 690.. etc.).

在最窄的版本(一列)中出现了带有角标记的问题-角标记被同位素元素覆盖...

Problem with corner stamp occurs in the narrowest version (one column) - the corner stamp is covered with Isotope elements...

在此演示中的同位素官方页面上也会发生相同的问题: http://isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html (当窗口变窄时，大的红色矩形会隐藏在其他同位素元素的后面).

The same issue occurs on Isotope official page in this demo: http://isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html (when window is narrowed the big red rectangle hides behind other Isotope elements).

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

I found that it can work properly as it has in Masnory plugin demo site! http://masonry.desandro.com/demos/corner-stamp.html

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

I've already combined to copy site scripts from Masnory to Isotope, but with no luck as I am no too good at JS/jQuery :/

最好在同位素中使用它，因为我希望我的站点具有过滤选项(Masnory插件中不提供).

It would be great to have it working in Isotope as I want my site to have filtering options (not available in Masnory plugin).

推荐答案

问题在Isotope.prototype脚本中...使用以下代码:

Problem is in the Isotope.prototype script...use the one below:

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

You'll notice the adjustment of the "for" call, the function shouldn't be using Math.max (not needed).

这篇关于jQuery Isotope-角印发行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！