jQuery Isotope - corner stamp issue

问题

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

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...

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).

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

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 :/

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

回答1:

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;
        }
    }
};

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

来源：https://stackoverflow.com/questions/8996005/jquery-isotope-corner-stamp-issue