我正在使用“带有扩展预览的缩略图网格”教程中的功能(就像其他所有人一样,它看起来像 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 的内容高度。我看到了一个类似的问题“扩展预览(calcHeight:函数) ”该解决方案根据(本质上)div.og-fullimg 或 div.og-details 的内容计算高度,以较高者为准。这是一个不错的解决方案,因为它考虑了内容的响应性,这对我来说很重要。不幸的是,我无法弄清楚如何将此解决方案应用于原始源代码。
在这里的任何帮助将不胜感激。