干得好。我认为这将适用于您要完成的工作。基本上，无论文本有多长，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>