Question

我正在使用jQuery同位素插件进行新闻栏目的网格布局，每个新闻项目显示每个新闻项目的第一段带有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的长度等于较短的div的长度，因此总是排队。 /> 但由于这将是一个新闻部分，我不能否定将会有多少文本，所以我试图弄清楚这是否可以动态完成。
例如grid-block高度为300像素，如果文本内容超过300像素，则会切换到630像素，依此类推等等。
任何建议将不胜感激！

Answer 1

我制作对象的副本，将高度设置为auto，计算高度，将其四舍五入为（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');

Answer 2

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

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

Answer 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();
});

如果你需要不同的类来设置背景颜色等，那么你可以调整这个逻辑来确定和应用正确的类。

动态确定div的高度

3 个答案: