如何强制一个将运行所有大小调整函数的大小调整事件

How to FORCE a resize event that will run all resize functions

本文关键字：调整 函数 事件 运行 何强制 一个      更新时间：2023-09-26

我正在使用masonry .js创建一个砖石风格的博客。这样做的问题是，当我点击"文章"，例如，我的JS使一切，但文章消失。而不是所有的文章填补空白，以前是由其他类型的文章填补，他们只是停留在相同的位置。

一旦我调整了窗口的大小，mason .js就会做它的事情，每个空隙都被文章填满了。我的问题是如何强制这种情况发生，而不必手动调整窗口的大小?

注意:

我试过这个链接强制窗口调整大小以触发

$(window).resize(function(){
  $('span').text('event fired!');
});
$('button').click(function(){
  window.dispatchEvent(new Event('resize'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Fire event</button>
<span></span>

这必须工作(我现在正在使用它)

     $(window).trigger('resize');

希望对你有帮助。

<标题>编辑

注意这是jQuery的语法。

<标题>编辑2 h1> 研究了一下mason .js(在这篇文章之前我没有遇到过)，我认为你可以这样解决这个问题: 
 $(window).on('resize', function () {
     $('#element').masonry('reloadItems');
 }); 
 $(window).trigger("resize");
好运

我设法解决了这个问题。

$('#article-options li').on('click', function() {
    setTimeout(function() {
        var $grid = $('#blog-container').masonry({
            columnWidth: 80
        });
        // change size of item by toggling gigante class
        $(this).toggleClass('gigante');
        // trigger layout after item size changes
        $grid.masonry('layout');
    }, 200);
});

我的博客的每个"部分"都在一个名为文章选项的ul中，因此当一个选项被点击(因此被更改)时，它将运行此功能。

我设置了一个超时，因为JS运行有点落后，让我点击两次代码运行。

我定义了一个新的砌体网格，我将其定义为容纳所有帖子的整体博客容器。然后我在适当的地方有代码识别点击功能的部分，并切换一个类弹出一切回到正确的位置。

至于细节，我不太确定，因为这不是我的模块。如果任何人有任何有价值的信息，可能会帮助别人，评论，我会更新我的答案。谢谢所有人。

相关文章：