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

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

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

最佳答案

为什么它不起作用
fitColumns 是一个“水平布局”，所以它的目的是向侧面而不是上下——类似于横向卷轴游戏。鉴于他们的设计，水平布局需要一个高度属性，如此处所述: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());

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

关于javascript - 同位素 fitColumns 布局导致容器变空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11119444/