javascript - Jquery Isotope：制作水平砌体

Question

我正在尝试使用 JQuery Isotope 构建 JQuery Masonry 的水平版本。我希望我的结果看起来像这样：

布局模式（点击砖石水平选项）。

根据网站说明： Masonry Horizontal 我的脚本如下所示：

$('#isotopecontainer').isotope({
        itemSelector : '.item',
        masonry : {
          columnWidth : 270
        }
 });

然而，有两件事正在发生：

1) 当页面加载时，div 的高度#isotopecontainer设置为 60px，因此您只能看到 div 的顶部.item。

2）如果您调整浏览器的大小，则#isotopecontainerdiv 会扩展，但.itemdiv 不会像示例那样排列。

任何人都可以帮助我指出正确的方向吗？我的演示站点在这里。

谢谢。

score 1 · Accepted Answer

您的演示站点在 Firefox 中运行。

虽然，您是对的，但在 Chrome 中并非如此。问题相当简单。您需要在图像上设置宽度和高度属性。否则，Chrome 将它们加载为 0px 高度（这使得容器的默认高度为 line-height 值），直到它们获得文件。Firefox 不这样做，它会在创建布局之前等待知道图像大小。

希望这有帮助！

score 1 · Accepted Answer

您需要添加 layoutMode: 'masonryHorizontal' 否则它将不起作用。像这样：

$('#isotopecontainer').isotope({
    itemSelector : '.item',
    layoutMode: 'masonryHorizontal',
    masonry : {
      columnWidth : 270
    }

});

score 0 · Accepted Answer

0

#isotophecontainer有overflow: hidden。删除它会在 Chrome 中为我显示所有图像。

于 2012-11-02T03:00:32.203 回答

3 回答 3