0

我正在使用Desandro的 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();
  });

});

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

任何人都知道如何解决这个问题？

谢谢

4

2 回答 2

1

@Parfait 谢谢。

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

$container.style.display = 'block';

实际上这个解决方案是作者在他的github问题跟踪器上发布的

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

于 2013-09-10T05:01:04.880 回答
0

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

$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

于 2013-09-10T04:28:34.133 回答