砌体给容器0高度

时间:2014-01-28 00:26:28

标签: jquery css responsive-design jquery-masonry

我正在研究一些涉及响应式砌体布局的东西。我有一个容器,其最大宽度为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,它应该能够很好地计算出身高。我错过了一些非常明显的东西吗?是否根本不可能使用百分比列宽与砌体?

1 个答案:

答案 0 :(得分:4)

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

请改为:

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