本文介绍了砌体给容器0高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在处理一些涉及响应式砖石布局的东西。我有一个容器的最大宽度 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中,函数类型不是。

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高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-14 12:35