jQuery Isotope - проблема с угловым штампом

Я начал использовать в своем проекте отличный плагин JQuery Isotope. Все работает отлично, но у меня есть одна проблема с опцией углового штампа.

Каждый элемент в моей сетке masnory имеет фиксированную ширину (220 пикселей + 5 полей) и случайную высоту (в зависимости от его содержимого), и я использую запросы @media в файле CSS для изменения количества столбцов при различном разрешении экрана (ширина страницы может быть 230, 460). , 690.. и др.).

Проблема с угловым штампом возникает в самой узкой версии (одна колонка) - угловой штамп закрыт изотопными элементами...

Та же проблема возникает на официальной странице Isotope в этой демонстрации: http://isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html (при сужении окна большой красный прямоугольник прячется за другими элементами Isotope).

Я обнаружил, что он может работать правильно, как на демонстрационном сайте плагина Masnory! http://masonry.desandro.com/demos/corner-stamp.html

Я уже объединился, чтобы скопировать скрипты сайта из Masnory в Isotope, но безуспешно, так как я не слишком силен в JS/jQuery :/

Было бы здорово, если бы он работал в Isotope, так как я хочу, чтобы на моем сайте были параметры фильтрации (недоступные в плагине Masnory).


jquery jquery-plugins jquery-isotope jquery-masonry
person karpik    schedule 24.01.2012    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Проблема в сценарии 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 (не требуется).

person Beam Dev Pit    schedule 23.02.2012
comment
У меня сработало хорошо, просто исправлена ​​​​небольшая проблема с форматированием кода :) - person Toddish; 08.01.2013
comment
@NickGinanto После того, как вы включили Isotope и до того, как вы его назвали. - person Toddish; 08.02.2013
comment
отличный! Благодарность! для тех, кто адаптировал код для верхнего левого угла: for ( i = 0; i < ( this.masonry.cols - cornerCols, cornerCols ); i++ ) { - person ptim; 18.04.2013