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

Question

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

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

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

Answer 1

Проблема в сценарии 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; 
     } 
    } 
}; 

Вы заметите регулировку «для» вызова, функция не должна быть с помощью Math.max (не нужно).