jquery masonry 切换可见性问题答案

【问题标题】：jquery masonry toggle visibility issuejquery masonry 切换可见性问题
【发布时间】：2013-09-10 13:01:04
【问题描述】：

我正在使用Desandro's Masonry Plugin v3.1.2。我正在从数据库中加载多个内容部分，这些部分应该使用这种布局类型（不同的宽度和高度；有和没有图像等）显示。我在顶部有一些按钮来切换不同的内容行。但是，当我隐藏所有行并显示用户选择的行时，砌体停止工作。我必须更改浏览器大小以使框再次获得正确的布局。

这里是代码：http://jsfiddle.net/jpruizs/x66nY/1/

正如您在第一次加载页面时所看到的那样，这些框的布局是正确的，但是当您单击顶部的某个链接时，这些框会显示在一个垂直列中。

$(function(){
  // Apply masonry layout to all containers
  var $container = $('.container');
  $container.masonry({
    columnWidth: 50,
    itemSelector: '.activity',
    gutter: 15
  });


  $('.link').click(function(){
    // Hide all visible containers
    $(".container:visible").hide();

    // Get the container to show
    row = $(this).attr('data-row');
    var $container = $("." + row);

    $container.toggle('slow');

    $container.masonry({
        columnWidth: 50,
        itemSelector: '.activity',
        gutter: 15
    }).masonry();
  });

});

如果您调整浏览器窗口（或小提琴面板）的大小，您将看到砌体布局再次重新加载。

有人知道如何解决这个问题吗？

谢谢

【问题讨论】：

标签： javascript jquery css jquery-masonry

【解决方案1】：

@Parfait 谢谢。

在点击事件再次重新加载砌体之前，我能够通过添加这一行来解决这个问题：

$container.style.display = 'block';

其实this solution是作者在他的github issue tracker上发布的

这是更新的工作小提琴http://jsfiddle.net/jpruizs/gedav/

【讨论】：

【解决方案2】：

@ 如果您调整浏览器窗口（或小提琴面板）的大小，您将看到砌体布局再次重新加载

$container.masonry({
    columnWidth: 50,
    itemSelector: '.activity',
    isResizeBound: false,
    gutter: 15
});

将 isResizeBound 设置为 false

http://jsfiddle.net/zksvh/

isResizeBound 仅在 Masonry 实例首次初始化时绑定布局。之后您可以使用 bindResize 和 unbindResize 方法绑定和取消绑定调整大小的布局。

http://masonry.desandro.com/options.html

【讨论】：

谢谢，但是您的解决方案没有按预期工作。我刚刚在这里发布了答案。