砌体给容器0高度 [英] Masonry giving container 0 height

问题描述

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

I'm working on some stuff that involves a responsive masonry layout. I have a container that has a max-width of 960px but scales down with the browser. My grid items have a percentage-based width (100%, 66.666666etc%, 33.33333etc%). For some reason, when I pass a function to the columnWidth option, it always gives the container a height of 0. This is how I'm instantiating 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 它应该能够计算高度罚款。我缺少一些真正明显的东西吗？是不是不可能使用百分比列宽和Masonry？

Any idea why it'd be doing this? Since I'm using $(window).load it should be able to calculate the height fine. Am I missing something really obvious here? Is it simply not possible to use percentage column widths with Masonry?

推荐答案

在Masonry中，函数类型不是 columnWidth 属性。

In Masonry, a function type isn't a permitted value for the columnWidth property.

尝试改为：

1. 传递CSS选择器（例如， .grid_box ）作为 columnWidth 属性。


2. 在CSS中，将选择器添加到其父容器的适当百分比宽度（例如， .grid_box {width：20％;} ）。


3. 添加一个空的 div class =grid_box>< / div> 到容器。

1. Pass a CSS selector (e.g., .grid_box) as the columnWidth property.
2. In CSS, add the selector to the appropriate percentage width of its parent container (e..g, .grid_box{ width: 20%; }).
3. To your HTML, add an empty <div class="grid_box"></div> to the container.

这篇关于砌体给容器0高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！