JQuery Isotope - выпуск угловой марки - PullRequest
Новая
       22

JQuery Isotope - выпуск угловой марки

2 голосов
/ 25 января 2012

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

Каждый элемент в моей сетке masnory имеет фиксированную ширину (220px + 5 полей) и случайную высоту (в зависимости от его содержимого), и яиспользование запросов @media в файле CSS для изменения номера столбцов при различном разрешении экрана (ширина страницы может быть 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: /

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

1 Ответ

9 голосов
/ 23 февраля 2012

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

...