Question

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

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

Answer 1

为什么不起作用

fitColumns是一个“水平布局”，因此它打算转向侧面而不是上下 - 类似于侧滚动游戏。根据他们的设计，水平布局需要一个height属性，如下所示：http://isotope.metafizzy.co/layout-modes.html#horizontal-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());

但是，您可以自行决定设置列宽的最合适方法。

Answer 2

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

您可能还想设置resizesContainer:false

同位素fitColumns布局导致容器变为空白

2 个答案: