Question

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

});

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

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

由于

Answer 1

@Parfait谢谢。

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

$container.style.display = 'block';

实际上，作者在他的github问题跟踪器上发布了this solution

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

Answer 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

jquery masonry切换可见性问题

2 个答案: