具有扩展预览的网格 - 基于内容高度计算高度

时间:2013-11-15 04:51:44

标签: javascript jquery css html

我正在使用“Thumbnail Grid with Expanding Preview”教程中的功能(就像其他人一样看起来像是O_o)我让它完全按照我想要的方式工作,除了代替div.og-expanded扩展到在页面的完整高度,我希望div.og-expanded只扩展到容器内容的大小。

我正在使用Github中的最新代码。

div.og-expanded的高度似乎由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 个答案:

没有答案