砌体给容器0高度

Question

我正在研究一些涉及响应式砌体布局的东西。我有一个容器，其最大宽度为960px，但随浏览器缩小。我的网格项目具有基于百分比的宽度（100％，66.666666etc％，33.33333etc％）。出于某种原因，当我将函数传递给columnWidth选项时，它总是给容器一个高度为0.这就是我实例化Masonry的方式。

$(window).load(function() {
  var $container;
  $container = $("#grid_container");
  $container.masonry({
    columnWidth: function(containerWidth) {
      return containerWidth / 3;
    },
    itemSelector: ".grid_item",
    isFitWidth: true,
    isResizable: true,
    gutter: 10
  });
});

知道为什么会这样做吗？由于我使用的是$(window).load，它应该能够很好地计算出身高。我错过了一些非常明显的东西吗？是否根本不可能使用百分比列宽与砌体？

Answer 1

在Masonry中，函数类型不是columnWidth property的允许值。

请改为：

1. 将CSS选择器（例如.grid_box）作为columnWidth属性传递。
2. 在CSS中，将选择器添加到其父容器的适当百分比宽度（例如，.grid_box{ width: 20%; }）。
3. 在HTML中，将空<div class="grid_box"></div>添加到容器中。