Question

我有一些div具有由“click”功能控制的动态高度，如下所示：

$('.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”选项（将在浏览器调整大小时重新加载布局），您只需创建一个触发“调整大小”事件的单击事件，如下所示：

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

无法实现动态高度jQuery Wookmark

1 个答案: