動態決定DIV

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的長度等於較短的2個，因此總是排隊。
但是，因爲這將是一個新聞欄目，我不能否定的大部分文字是怎麼去那裏，所以我試圖找出這是否可以被動態地進行。
例如grid-block高度爲300像素，如果文字內容長度超過300像素，則會切換到630像素，依此類推。
任何建議將不勝感激！

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

Answer 2

如果我正確理解你，請嘗試將.grid-block-long高度屬性設置爲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(); 
}); 

如果您需要爲造型的背景顏色不同的類，等等，那麼你可以適應這個邏輯來確定並應用適當的類。