kann nicht dynamisch Höhe jQuery Wookmark implementieren

Question

ich einige divs haben, die durch einen ‚Klick‘ Funktion, wie unten gesteuert dynamische Höhen haben:

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

Ich versuche, anzuwenden, um die jQuery wookmark plugin den divs, und es funktioniert, abgesehen ab, wenn ihre Höhe dynamisch geändert wird, indem einer der Abschnitte erweitert wird. Aus der Dokumentation, kopiert ich über eines der Beispiele zu meinen Code und die dynamische Höhe arbeitet

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

du here Arbeit sehen können. Wie kann ich es so machen, dass, wenn Sie auf eine der Überschriften in den divs klicken, das Layout aktualisiert wird, wie im Beispiel. Danke im Voraus.

Answer 1

Normalerweise enthalten jQuery-Plugins von Drittanbietern eine Art "Refresh" - oder "Resize" -Funktion.

Mit einem kurzen Blick auf die Funktion scheint es keine zu haben; Da jedoch ein "AUTORESIZE" Option gibt es (die das Layout auf Browser-Resize wird neu geladen), können Sie einfach ein Click-Ereignis erstellen, die die "Größe ändern" Ereignis wie so löst:

javascript:

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

http://api.jquery.com/trigger/

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

---

EDIT: die Frage erneut zu lesen, wieder 012.Sieht so aus: handler.wookmark();

sollte das Layout (basierend auf Ihrem geposteten Code) aktualisieren. Sie sollten das also anstelle des Resize-Triggers verwenden können.

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