Jquery 动态确定div的高度

我将jQuery同位素插件用于新闻部分的网格布局，每个新闻项都显示每个新闻的第一段，单击后显示其余内容。
下面是我的示例，我将解释我遇到的问题：
jsFiddle:
jQuery：

正如您在所示的示例中所看到的，单击

阅读更多

按钮加载其余的文本内容，并切换div的类以允许文本适合。我这样做的原因是我总是希望div的高度适合网格，也就是说，如示例中所示，较长div的长度等于较短div的2，因此总是对齐。
但由于这将是一个新闻部分，我不能否认会有多少文本出现，所以我试图弄清楚这是否可以动态完成。
e、 g.

网格块

高度为300px，如果文本内容长度超过300px，则会切换到630px，以此类推。

---

如有任何建议，将不胜感激

如果我理解正确，请尝试将

.grid block long

height属性设置为

auto

，这样它将缩放到包含的任何文本量。如果您想确保它也是一个特定的高度，您可以添加一个

min height

---

我复制对象，将“高度”设置为“自动”，计算其高度，将其四舍五入为（n*330）-30，最后将原始元素的高度设置为计算出的高度

---

为了使所有div保持对齐，您必须测量显示所有内容的块的高度，并确定适合所有内容的高度，如下所示：

$('.read-more').click(function () {
    $(this).hide();
    $(this).nextAll('.grid-block-text')
        .children('p').fadeIn('slow');
    $(this).siblings('.read-less').fadeIn('slow');
    $(this).parent('.grid-block').css('height','auto');
    var contentHeight = $(this).parent('.grid-block').height();
    var containerHeight = 300;
    while(true){
        if(contentHeight < containerHeight)
            break;
        containerHeight+=330
    }
    $(this).parent('.grid-block').css('height',containerHeight+'px');
    $('#main-grid').isotope('reLayout');
    $container.isotope();
});

$（'.read more'）。单击（函数（）{
$（this.hide（）；
$（this）.nextAll（“.grid block text”）
.儿童（'p'）。法代因（'slow'）；
$（this）.兄弟姐妹（'.read less'）.fadeIn（'slow'）；
$（this）.parent（'.grid block'）.css（'height'，'auto'）；
var contentHeight=$（this.parent（'.grid block'）.height（）；
var容器高度=300；
while（true）{
if（内容高度<容器高度）
打破
集装箱重量+=330
}
$（this）.parent（'.grid block'）.css（'height'，containerHeight+'px'）；
$（“#主栅格”）。同位素（‘重新布置’）；
$container.同位素（）；
});

---

如果您需要不同的类来设置背景色等样式，那么您可以调整此逻辑以确定并应用适当的类。

哇，太好了，正是我想要的！非常感谢，非常感谢。即使没有克隆div，它也能工作，这对我来说更“优雅”

var $this = $(this),
    $parent = $this.parent('.grid-block');

var $copy = $parent.clone().appendTo('body').hide().css('height','auto');
var newHeight = $copy.height();
$copy.remove();
newHeight = (Math.floor((newHeight+29)/330)+1)*330-30;
$parent
    .css('height',newHeight)
    .removeClass('grid-block')
    .addClass('grid-block-long');

$('.read-more').click(function () {
    $(this).hide();
    $(this).nextAll('.grid-block-text')
        .children('p').fadeIn('slow');
    $(this).siblings('.read-less').fadeIn('slow');
    $(this).parent('.grid-block').css('height','auto');
    var contentHeight = $(this).parent('.grid-block').height();
    var containerHeight = 300;
    while(true){
        if(contentHeight < containerHeight)
            break;
        containerHeight+=330
    }
    $(this).parent('.grid-block').css('height',containerHeight+'px');
    $('#main-grid').isotope('reLayout');
    $container.isotope();
});