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

Question

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

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

Answer 1

为什么它不起作用

fitColumns是一个"水平布局",因此它打算转向侧面而不是上下 - 类似于侧滚动游戏.根据他们的设计,水平布局需要一个height属性,如下所示: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());

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