2013-11-15 3 views
2

Я использую функциональность из учебника «Thumbnail Grid with Expanding Preview» (как и все остальные, что казалось бы O_o). У меня все работает так, как я хочу, за исключением того, что вместо div.og-expand расширяется до полной высоты страницы, я бы хотел, чтобы div.og-расширенный расширялся только до размера содержимого внутри контейнера.Сетка с расширенным представлением - подсчитайте высоту на основе высоты содержимого

Я использую последний код от Github.

Высота div.og-расширения, как представляется, контролируется calcHeight: функция в grid.js

 calcHeight : function() { 

     var heightPreview = winsize.height - this.$item.data('height') - marginExpanded, 
      itemHeight = winsize.height; 

     if(heightPreview < settings.minHeight) { 
      heightPreview = settings.minHeight; 
      itemHeight = settings.minHeight + this.$item.data('height') + marginExpanded; 
     } 

     this.height = heightPreview; 
     this.itemHeight = itemHeight; 

    }, 
    setHeights : function() { 

     var self = this, 
      onEndFn = function() { 
       if(support) { 
        self.$item.off(transEndEventName); 
       } 
       self.$item.addClass('og-expanded'); 
      }; 

     this.calcHeight(); 
     this.$previewEl.css('height', this.height); 
     this.$item.css('height', this.itemHeight).on(transEndEventName, onEndFn); 

     if(!support) { 
      onEndFn.call(); 
     } 

    }, 

Как я уже говорил, вместо того, чтобы использовать размер окна, чтобы получить высоту, я хотел бы чтобы отделить его от высоты содержимого div.og-expander-inner. Я видел аналогичный вопрос «Expanding preview (calcHeight : function)». Решение рассчитало высоту, основанную на содержании (по существу) div.og-fullimg или div.og-деталей в зависимости от того, что выше. Это достойное решение, так как оно учитывает отзывчивость содержания, что важно для меня. К сожалению, я не мог разобраться, как применить это решение к исходному исходному коду.

Любая помощь здесь будет принята с благодарностью.

ответ

0

Адрес: JSFiddle. Вам просто нужно вставить его в свой код.

<div>Just some code, so that I can post the Link ;)</div> 

Надеюсь, что смогу вам помочь.

Смежные вопросы