Isotope.js - 元素之间的WhiteSpace

Question

我过去曾使用过masonry.js但我听说Isotope.js更灵活/更好所以我去下载它以制作网格图库。

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

http://codepen.io/anon/pen/lByri

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宽度，并将元素放在屏幕上，其位置为：absolute，top和left值。

实施例： 我的图片是540x375 我的div图像宽度为25％。所以连续4张图片。

我将使用我行上的第二张图片，以便您了解属性部分。 它给出了一个480px（加载时）的左属性，在调整大小并返回原始大小后，它给出了一个475px的左属性。

在475px时，网格是完美的，但在加载时它处于480px时会留下一些我不想拥有的白色空间。

感谢您的帮助！ -Antoine

Answer 1

我终于找到了答案。

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