jquery - 动态确定div的高度

Question

我正在使用 jQuery 同位素插件来实现新闻部分的网格布局，每个新闻元素显示每个新闻的第一段，并带有一个阅读更多按钮，点击后显示其余内容.
这是我的示例，我将解释我遇到的问题:
jsFiddle:http://jsfiddle.net/neal_fletcher/gXukc/4/
jQuery:

$(document).ready(function () {
    var $container = $('#main-grid');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.grid-block, .grid-block-long',
            animationEngine: 'best-available',
            masonry: {
                columnWidth: 5
            }
        });
    });
});

$(document).ready(function () {
    $('.grid-block-text p').hide().filter(":first-child").show();
});

$(document).ready(function () {
    $('.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')
            .removeClass('grid-block')
            .addClass('grid-block-long');
        $('#main-grid').isotope('reLayout');
        $container.isotope();
    });

    $('.read-less').click(function () {
        $(this).hide();
        $(this).nextAll('.grid-block-text')
            .children("p:not(:first-child)").fadeOut('fast');
        $(this).siblings('.read-more').fadeIn('slow');
        $(this).parent('.grid-block-long')
            .removeClass('grid-block-long')
            .addClass('grid-block');
        $('#main-grid').isotope('reLayout');
        $container.isotope();
    });
});

如您在所示示例中所见，单击 read more 按钮会加载其余文本内容并切换 div 类以允许文本适合。我这样做的原因是我总是希望 div 的高度适合网格，即在示例中，较长 div 的长度等于较短 div 的 2，因此总是排成一行。
但由于这将是一个新闻版 block ，我无法否定将有多少文本，所以我想弄清楚这是否可以动态完成。
例如grid-block的高度是300px，如果文字内容超过300px，就会切换到630px，以此类推。
任何建议将不胜感激!

Answer 1

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

http://jsfiddle.net/mattydsw/gXukc/9/

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');