问题描述
我正在处理一些涉及响应式砖石布局的东西。我有一个容器的最大宽度 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.
尝试改为:
- 传递CSS选择器(例如,
.grid_box
)作为columnWidth
属性。 - 在CSS中,将选择器添加到其父容器的适当百分比宽度(例如,
.grid_box {width:20%;}
)。 - 添加一个空的
div class =grid_box>< / div>
到容器。
- Pass a CSS selector (e.g.,
.grid_box
) as thecolumnWidth
property. - In CSS, add the selector to the appropriate percentage width of its parent container (e..g,
.grid_box{ width: 20%; }
). - To your HTML, add an empty
<div class="grid_box"></div>
to the container.
这篇关于砌体给容器0高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!