使用 jQuery isotope 插件设置宽度和高度答案

【问题标题】：Setting width and height using jQuery isotope plugin使用 jQuery isotope 插件设置宽度和高度
【发布时间】：2013-02-08 23:51:08
【问题描述】：

我正在使用 jQuery Isotope 插件，虽然我可以使用它，但我似乎无法让它识别任何边距。

我可以在 Firebug 中看到正在应用边距，但项目只是与边距重叠（我认为因为同位素使用绝对定位）。

我使用以下方法使宽度短暂工作：

masonry : {
columnWidth : 172
          }

但我不知道如何使高度起作用（我尝试了带砖石的 rowHeight 和 masonryHorizontal）。

我如何告诉同位素使用什么宽度和高度？

谢谢

【问题讨论】：

标签： jquery height width jquery-isotope

【解决方案1】：

尝试使用此代码：

$(window).load() instead of $(document).ready()

【讨论】：

【解决方案2】：

问题可能是 Isotope 在加载图像之前就已经完成了它的工作。使用此代码：

var $container = $('#container');

$container.imagesLoaded(function() {
  $container.isotope({
    // options...
  });
});

【讨论】：

【解决方案3】：

我遇到了类似（如果不相同）的问题；我的物品之间没有垂直间距。确保在平铺元素上包含以下 CSS 属性：

.element {
  width: 110px; /*your columnWidth minus 10px */
  height: 110px; /*same as width, for a square grid system*/
  margin: 5px; /*5px here will result in 10px of vertical spacing between tiles*/
  float: left;
  overflow: hidden;
  position: relative;
}

希望这会有所帮助。

【讨论】：