动态确定div的高度答案

【问题标题】：Dynamically determine height of div动态确定div的高度
【发布时间】：2013-06-29 18:30:14
【问题描述】：

我正在使用 jQuery isotope 插件来进行新闻部分的网格布局，每个新闻项显示每个新闻的第一段，并带有一个 read more 按钮，单击后会显示其余内容。
这是我的示例，我将解释我遇到的问题：
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 的长度等于 2 个较短 div，因此总是排成一行。
但由于这将是一个新闻部分，我无法否定其中会有多少文本，所以我试图弄清楚这是否可以动态完成。
例如grid-block 高度为 300px，如果文字内容超过 300px，则会切换到 630px 以此类推。
任何建议将不胜感激！

【问题讨论】：

标签： jquery html css jquery-isotope

【解决方案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');

【讨论】：

哇，完美，正是我想要的！谢谢你，非常感谢。
即使不克隆 div 也能正常工作，这对我来说更“优雅”jsfiddle.net/mattydsw/gXukc/10

【解决方案2】：

如果我对您的理解正确，请尝试将.grid-block-long 高度属性设置为auto，这样它将缩放到其中包含的任何文本数量。如果你想确保它也是一个特定的高度，你可以添加一个min-height。

http://jsfiddle.net/gXukc/6/

【讨论】：

【解决方案3】：

为了保持所有 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();
});

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

【讨论】：