Jquery Isotope：制作水平砌体答案

【问题标题】：Jquery Isotope: making horizontal MasonryJquery Isotope：制作水平砌体
【发布时间】：2012-11-02 02:20:22
【问题描述】：

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

Layout-modes（点击砖石水平选项）。

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

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

但是，有两件事正在发生：

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

2) 如果您调整浏览器大小，#isotopecontainer div 会扩展，但 .item div 不会像示例那样排列。

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

谢谢。

【问题讨论】：

【解决方案1】：

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

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

希望对您有所帮助！

【讨论】：

谢谢，你是对的，但令人讨厌的是它破坏了插件 - 图像没有正确间隔
不幸的是，没有人可以在加载之前知道图像的大小。不幸的是，chrome 之前会开始布置你的页面。因此，您手动设置大小，或者每次加载图像（onload 事件）时在同位素上调用重新布局方法...

【解决方案2】：

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

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

});

【讨论】：

【解决方案3】：

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

【讨论】：