2013-11-15 60 views
2

我使用的是「Thumbnail Grid with Expanding Preview」教程中的功能(與其他人看起來似乎是O_o一樣)我的工作方式幾乎與我想要的一樣,除了代替div.og展開展開到頁面的整個高度,我想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-details中的哪一個更高的內容(基本上是什麼)計算高度。考慮到內容的響應性,這是一個體面的解決方案,這對我很重要。不幸的是,我無法理清如何將此解決方案應用於原始源代碼。

在這裏的任何幫助將不勝感激。

回答

0

這是我的JSFiddle。你只需要將它插入你的代碼。

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

希望我能幫助你。

相關問題