0

I'm using the jQuery isotope plugin for a grid layout of a news section, each news item showing the first paragraph of each with a read more button, once clicked showing the rest of the content.
Here's my example and I'll explain the problem I'm having:
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();
    });
});

As you can see in the example shown, clicking on the read more button loads the rest of the text content and switches the class of the div to allow the text to fit. The reason I've done this is I always want the height of the divs to fit into the grid, i.e. as in the example, the length of the longer div is equal to 2 of the shorter ones, thus always lining up.
But as this is going to be a news section, I can't negate for how much text is going to be there, so I'm trying to figure out if this can be done dynamically.
e.g. grid-block is 300px in height, if the text content is longer than 300px, it will then switch to 630px and so on and so on.
Any suggestions would be greatly appreciated!

4

3 回答 3

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');
于 2013-06-29T19:19:30.410 回答
0

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

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

于 2013-06-29T19:23:50.370 回答
0

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

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

于 2013-06-29T18:56:37.267 回答