我正在a website上建立this tutorial。
我正在尝试弄清楚如何根据内容的高度添加自动高度。它最初被锁定在窗户大小，但我希望它能够进一步向下扩展。
原始代码的第455行：
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;
},
我的解决方案可以在50％的时间内工作（本地工作非常好吗？！）：
calcHeight : function() {
var lol = this.$fullimage[0].getElementsByTagName('img')[0];
var oImage = new Image();
oImage.onload = function(){
this.height// width of loaded image
}
oImage.src = lol.src;
this.height = oImage.height;
this.itemHeight = oImage.height+650;
},
setHeights : function() {
var self = this,
onEndFn = function() {
if( support ) {
self.$item.off( transEndEventName );
}
self.$item.addClass( 'og-expanded' );
};
答案 0 :(得分：1)
你走了。我认为这对你想要完成的事情有用。基本上，无论文本多长，div高度都将是内容的高度，或者第一个图像的高度，以较大者为准。然后单击div时，它将加载其他图像。加载图像后，如果再次单击div，则会缩小到原始大小。
检查一下，如果需要调整，请告诉我。
注意：这在浏览器窗口中看起来更好，但在jsfiddle中工作。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
.story {
width:75%;
padding:5px;
margin:5px;
cursor:pointer;
border:1px solid black;
}
.text{
padding:5px;
margin:5px;
width:20%;
}
.images{
float:right;
padding:5px;
margin:5px;
width:70%;
}
img{
padding:5px;
margin:5px;
width:95%;
}
</style>
</head>
<body>
<div class="story" id="story1">
<div class="images">
<img src="http://www.gstatic.com/webp/gallery/1.jpg" />
<img src="http://www.gstatic.com/webp/gallery/2.jpg" />
<img src="http://www.gstatic.com/webp/gallery/3.jpg" />
<img src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu 100% Original Work created by Howard Renollet for StackOverflow.com http:// stackoverflow.com /questions /19916419 /expanding-preview-calcheight-function/ ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut.</p>
</div>
</div>
<div class="story" id="story2">
<div class="images">
<img src="http://www.gstatic.com/webp/gallery/1.jpg" />
<img src="http://www.gstatic.com/webp/gallery/2.jpg" />
<img src="http://www.gstatic.com/webp/gallery/3.jpg" />
<img src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.</p>
</div>
</div>
<div class="story" id="story3">
<div class="images">
<img src="http://www.gstatic.com/webp/gallery/1.jpg" />
<img src="http://www.gstatic.com/webp/gallery/2.jpg" />
<img src="http://www.gstatic.com/webp/gallery/3.jpg" />
<img src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper.</p>
</div>
</div>
<script>
(function () {
//Get each story box
$(".story").each(function () {
//for each .images box
$(this).children(".images").each(function () {
//hide all of the images
$(this).children("img").hide();
});
//show the first image
$(this).children(".images").children("img:first").show();
//get the text height
var textHeight = $(this).children(".text").height();
//get the image height
var imgHeight = $(this).children(".images:first-child").height();
//define originalHeight
var originalHeight;
//Which one is bigger?
if (textHeight >= imgHeight) {
//If the text height is larger
//set the story box height to the text height
$(this).height(textHeight);
//set originalHeight
originalHeight = textHeight;
}
else if (imgHeight > textHeight) {
//if the image height is larger
//set the story box height to the image height
$(this).height(imgHeight);
//set originalHeight
originalHeight = imgHeight;
};
//when clicking the div
$(this).click(function () {
//if this height is less than the image max height
if ($(this).height() <= originalHeight) {
//show the images
$(this).children(".images").children("img").show();
//set this height to the image max height
$(this).height($(this).children(".images").height());
}
else {
//for each .images box
$(this).children(".images").each(function () {
//hide all of the images
$(this).children("img").hide();
})
//show the first image
$(this).children(".images").children("img:first").show();
//set the text height
var textHeight = $(this).children(".text").height();
//set the image height
var imgHeight = $(this).children(".images:first-child").height();
//Which one is bigger?
if (textHeight >= imgHeight) {
//If the text height is larger
//set the story box height to the text height
$(this).height(textHeight);
}
else if (imgHeight > textHeight) {
//if the image height is larger
//set the story box height to the image height
$(this).height(imgHeight);
};
};
});
});
})();
</script>
</body>
</html>
答案 1 :(得分：0)
Заменитьэтим：
calcHeight：function（）{
var heightPreview = $('.og-details p').height() + this.$item.data( 'height' ) + marginExpanded,
itemHeight = heightPreview;
if( heightPreview < settings.minHeight ) {
heightPreview = settings.minHeight;
itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
}
this.height = heightPreview;
this.itemHeight = itemHeight + this.$item.data( 'height' ) + marginExpanded ;
},