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

回答

相關問題