Question

我有一个基本的切换开关，显示点击的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上发生）。非常感谢答案，但这种方式肯定更容易。

Answer 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会保存您的初始设置，因此您只需再次调用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();
});

Answer 2

我也有一个切换，并且无法为此效果重新加载。但是当物品淡出（过滤）时，我确实得到重新加载。

请参阅：http://jasondaydesign.com/masonry_demo/

Answer 3

您有一个错误的路径，其中包含masonry.js文件..

你应该使用js/jquery.masonry.js JS/jquery.masonry.js（大写JS）

并且您在传递给砌体的选项末尾有一个额外的逗号（，）..

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

Answer 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' );
            }
        });

使用砌体插件进行Jquery回调

4 个答案: