我正在研究一些涉及响应式砌体布局的东西。我有一个容器,其最大宽度为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
,它应该能够很好地计算出身高。我错过了一些非常明显的东西吗?是否根本不可能使用百分比列宽与砌体?
答案 0 :(得分:4)
在Masonry中,函数类型不是columnWidth
property的允许值。
请改为:
.grid_box
)作为columnWidth
属性传递。.grid_box{ width: 20%; }
)。<div class="grid_box"></div>
添加到容器中。