使用jQuery同位素插件设置宽度和高度

时间:2011-06-13 12:53:02

标签: jquery height width jquery-isotope

我正在使用jQuery Isotope插件,虽然我有它工作,我似乎无法识别任何边缘。

我可以在Firebug中看到正在应用边距,但这些项目只是重叠边缘(我认为因为同位素使用绝对定位)。

我使用以下内容简化了宽度:

masonry : {
columnWidth : 172
          }

但是我无法弄清楚如何让高度工作(我尝试用砌筑的rowHeight和砌石水平)。

如何判断同位素的宽度和高度?

由于

3 个答案:

答案 0 :(得分:1)

尝试使用此代码:

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

答案 1 :(得分:1)

问题可能是Isotope在加载图像之前正在做它的事情。 使用此代码:

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

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

答案 2 :(得分:0)

我遇到了类似的(如果不是同一个)问题;我的物品之间没有垂直间距。确保在平铺元素中包含以下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;
}

希望这有帮助。