javascript - 无法实现动态高度 jQuery Wookmark

Question

我有一些 div 的动态高度由“点击”功能控制，如下所示:

$('.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 。我怎样才能做到这一点，以便当您单击 div 内的标题之一时，布局会更新，如示例中所示。提前致谢。

Answer 1

通常第三方 jQuery 插件包含某种“刷新”或“调整大小”功能。

快速浏览一下该函数，似乎没有这个函数；但是，由于有一个“autoResize”选项(它将在浏览器调整大小时重新加载布局)，因此您可以简单地创建一个触发“resize”事件的点击事件，如下所示:

JavaScript:

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

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

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

---

编辑: 再次重新阅读问题， 看起来像这样: handler.wookmark();

应该刷新布局(根据您发布的代码)。因此，您应该能够使用它来代替调整大小触发器。

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