無法實現動態高度的jQuery Wookmark

我有一些div具有由下面一個「點擊」功能控制的動態高度：無法實現動態高度的jQuery Wookmark

$('.expand').click(function() { 
    $(this).next('.collapse').slideToggle(); 
});

我試圖以應用jQuery wookmark plugin到div的，和它的作品，除了從他們的高度通過擴展其中一個部分動態調整大小。從文檔，我複製過來的例子，我的一個代碼，動態高度工作

 $(document).ready(new function() { 
      // Prepare layout options. 
      var options = { 
      autoResize: true, // This will auto-update the layout when the browser window is resized. 
      container: $('#container'), // Optional, used for some extra CSS styling 
      offset: 30, // Optional, the distance between grid items 
      itemWidth: 300 // Optional, the width of a grid item 
      }; 

      // Get a reference to your grid items. 
      var handler = $('.outerwrapper'); 

      // Call the layout function. 
      handler.wookmark(options); 

      // Capture clicks on grid items. 
      handler.click(function(){ 
      // Randomize the height of the clicked item. 
      var newHeight = $('img', this).height() + Math.round(Math.random()*300+30); 
      $(this).css('height', newHeight+'px'); 

      // Update the layout. 
      handler.wookmark(); 
      }); 
     });

你可以看到這個工作here。我怎樣才能做到這一點，以便當你單擊divs中的標題之一時，佈局更新，就像它在示例中一樣。提前致謝。

來源

2012-04-04 jacktheripper

通常第三方jQuery插件包含某種「刷新」或「調整大小」功能。

快速查看功能，它似乎沒有;然而，由於有一個「自動調整」選項（這將重新加載瀏覽器的尺寸調整佈局），你可以簡單地創建觸發「調整大小」事件像這樣一個click事件：

JAVASCRIPT：

$("h1.resize").live("click", function() 
{ 
    $(window).trigger('resize'); 
});

http://api.jquery.com/resize/

編輯：再次重讀的問題，看起來像這樣： handler.wookmark（）;

應刷新佈局（根據您的發佈代碼）。所以你應該可以使用它來代替調整大小的觸發器。

$("h1.resize").live("click", function() 
{ 
    handler.wookmark(); 
});

來源

2012-04-04 17:56:55

謝謝！你的第一個建議工作:) – jacktheripper 2012-04-04 19:27:26

如果你再看一遍，該功能現在正在工作。但是，當我使用slideToggle而不是切換，我得到意想不到的結果。有什麼建議麼？ – jacktheripper 2012-04-04 19:34:34

slideToggle會得到什麼樣的結果？ slideToggle（slideUp，slideDown）的問題是發生這種情況的CSS。我經常喜歡檢查使用Firebug進行更改的元素（發生高度變化的單個div），並在事件發生時查看該元素上的內聯CSS。 - slideUp/slideDown使用的CSS可能與使wookmark工作的CSS衝突。我的建議是使用.animate（）代替。它允許更好的調整控制。 – 2012-04-04 19:45:11

無法實現動態高度的jQuery Wookmark

回答

相關問題