Isotope.js - 元素之间的WhiteSpace

我在过去使用过masonry.js，但我听说Isotope.js更灵活/更好，所以我去下载它来创建一个网格图像库。Isotope.js - 元素之间的WhiteSpace

我现在的问题是同位素在调整大小（页面加载）之前在元素之间留下一点空白区域。调整大小后，即使我回到原始窗口大小，元素大小也会发生变化，并且空白区会消失。

jQuery(document).ready(function(){ 
    var $container =jQuery('.gallery-grid-container').isotope({ 
     itemSelector: '.item', 
     masonry: { 
      columnWidth: '.item' 
     } 
    }); 
});

是没有问题的，当我做它在codepen，只有在我的网站。

（http://avetisthemes.com/photography/gallery-grid/）

同位素是如何工作的是，它需要你在写的jQuery在div宽度，并将其与位置放置元素在屏幕上：绝对的，顶部和左侧值。

例如：我的图像是540x375 我div的图像是25％的宽度。所以4连续的图像。

我将与我的行上的第二张图片一起去，以便您了解属性部分。它给出了一个480像素左右的属性（加载时），在调整大小并恢复到原始大小后，它给出了475px的左侧属性。

在475像素，网格是完美的，但在负载时，它是在480像素，它留下了一个我不想有的空白空间。

感谢您的帮助！ -Antoine

来源

2014-09-02 Antoine Dionne

请在jsfiddle或类似的地方添加一个实例 – 2014-09-02 13:35:19

http://codepen.io/anon/pen/lByri – 2014-09-02 14:04:55

我终于自己找到了答案。

这是一个CSS问题，我只需要将vertical-align:top加到我的.item类中。

来源

2014-09-02 15:14:56

Isotope.js - 元素之间的WhiteSpace

回答

相关问题