7

请参阅http://jsfiddle.net/cUcFd/5/ - 请注意，如果您将 layoutMode 更改为“masonry”或“fitRows”，它可以正常工作。但是使用“fitColumns”它只是空白，所有块都消失了。

似乎有关于在容器和项目上设置什么样式以使 fitColumns 模式工作的要求，但我找不到任何关于它们是什么的文档。

4

2 回答 2

8

为什么它不起作用

fitColumns是一种“水平布局”，因此它旨在向侧面移动而不是上下移动 - 类似于横向卷轴游戏。鉴于他们的设计，水平布局需要一个高度属性，如此处所述：http: //isotope.metafizzy.co/layout-modes.html#horizo​​ntal- layouts

静态解决方案

我想用多少列来填充容器的宽度，并且我希望它占用尽可能多的垂直空间。

您想使用masonry而不是fitColumns. 设置columnWidth将允许您填充容器的宽度并根据需要使用尽可能多的垂直空间。例如：http: //jsfiddle.net/cUcFd/22/

$('#container').isotope({
    itemSelector : '.block',
    // layoutMode: 'fitColumns',
    layoutMode: 'masonry',
    masonry: {
        columnWidth: 100
    }
});

动态解决方案

假设您不知道列的宽度并希望动态找到它，您可以#container使用此处提供的代码以最宽的元素为基础：https ://stackoverflow.com/a/8853777/1786459

例如：http: //jsfiddle.net/cUcFd/24/

var column_width = Math.max.apply(null,$('#container .block').map(function(){return $(this).outerWidth(true);}).get());

但是，由您决定设置列宽的最合适方法。

于 2014-02-03T16:14:20.697 回答
2

尝试为您的容器设置宽度和高度。当你使用layoutMode:'fitColumns'时，它必须给所有元素一个不再填充容器的浮动属性。

您可能还想设置resizesContainer:false

于 2012-06-20T20:47:55.803 回答