带有砌体插件的 Jquery 回调答案

【问题标题】：Jquery callbacks with masonry pluggin带有砌体插件的 Jquery 回调
【发布时间】：2010-01-27 00:57:47
【问题描述】：

我有一个基本的切换开关，在关闭所有其他类似的 div 时显示点击的 div。这工作得很好，切换不是问题。见下文：

$(document).ready(function(){
 $('.threadWrapper > .littleme').click(function() {
  $(this).next().toggle('slow');
  $(this).toggle('slow');
  $('.littleme').not(this).next().hide('slow');
  $('.littleme').not(this).show('slow');
  return false;
 }).next().hide();
});

我还使用了 jQuery 的 Masonry 插件，它先水平然后垂直组织所有选定的 div 元素。非常棒，适用于各种不同的 div 高度。见下文：

$(function(){
    $('#mainContent').masonry({
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible',
});
});

我希望它在每次 div 展开或折叠时重新组织布局。实际上触发 .masonry 命令作为初始 .click 函数的回调。这对我不起作用。初学者问题的道歉。

在这里查看它目前的工作方式：kalpaitch.com

安德鲁

Gaby - 谢谢你的语法检查，我很擅长把它们弄乱，然后花大约半个小时跑来跑去寻找它们。

Cyro - 完美且有效，我将在不久的将来使用它。我打算添加的是在显示/隐藏/切换这些动画速度的情况下如何实现这一点（上面的代码相应更改）。然后砌体调用将在 div 扩展之前触发（正如目前在 kalpaitch.com 上发生的那样）。非常感谢您的回答，这样肯定更容易。

【问题讨论】：

标签： jquery callback

【解决方案1】：

尝试在点击更改解决后重新运行砌体调用以重新调整页面：

$(document).ready(function(){
 $('.threadWrapper > .littleme').click(function() {
  $(this).next().toggle();
  $(this).toggle();
  $('.littleme').not(this).next().hide();
  $('.littleme').not(this).show();

  // re-run masonry
  $('#mainContent').masonry({
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible'
  });

  return false;
 }).next().hide();
});

编辑：查看 Masonry 文档，Masonry 似乎会保存您的初始设置，因此您只需再次调用 main 方法。这也应该有效：

$(document).ready(function(){
 $('.threadWrapper > .littleme').click(function() {
  $(this).next().toggle();
  $(this).toggle();
  $('.littleme').not(this).next().hide();
  $('.littleme').not(this).show();

  // re-run masonry
  $('#mainContent').masonry();

  return false;
 }).next().hide();
});

【讨论】：

【解决方案2】：

我也有一个切换开关，但无法让砖石重新加载以获得该效果。但是当项目淡出（过滤）时，我确实得到了重新加载的砌体。

见：http://jasondaydesign.com/masonry_demo/

【讨论】：

非常好。虽然有点可惜 IE 还在 90 年代随着褪色。我尝试了一个正常工作的超时，但这看起来更流畅。请注意，如果我看到你的结果。
你能解释一下吗？第一次运行后如何强制 Masonry 再次运行？这在任何地方都有记录吗？
好吧，我会使用 Desandro 最新的 - 同位素，其中包括过滤。但是，如果您点击我的链接并查看代码，您会看到我在哪里添加了过滤功能和超时

【解决方案3】：

您包含 masonry.js 文件的路径错误..

当它应该是JS/jquery.masonry.js（大写JS）时，你使用js/jquery.masonry.js

并且您在传递给 masonry 的选项末尾有一个额外的逗号 (,) ..

在您修复示例中的这些错误后，只需再次运行砌体代码，就像 Cryo 在他的回答中提到的那样......

【讨论】：

【解决方案4】：

已经有一段时间了，但是由于我在搜索其他内容时不断遇到您的问题，所以我要在这里添加 Masonry 添加了 .reload 功能。这对我有用：

        $(window).resize(function(){
            var wallWidth   = $wall.width();
            var width       = $(window).width();
            if ( width<700 ) {
                    $('.brick').css( 'width', wallWidth/1);
                    $wall.masonry( 'option', { columnWidth: wallWidth/1 });
                    $wall.masonry( 'reload' );
            } else if ( width>=700 && width<1024 ) {
                    $('.brick').css( 'width', wallWidth/2 - 1);
                    $wall.masonry( 'option', { columnWidth: wallWidth/2 });
                    $wall.masonry( 'reload' );
            } else if (width>=1024) {
                    $('.brick').css( 'width', wallWidth/3 - 1);
                    $wall.masonry( 'option', { columnWidth: wallWidth/3 });
                    $wall.masonry( 'reload' );
            }
        });

【讨论】：