同位素項目

Question

我剛剛成立的同位素爲最近的一個項目，在我的頁面的底部添加了這個

<script type="text/javascript"> 
$('#isotope').isotope({ 
layoutMode : 'masonry', 
itemSelector : '.isotope-item' 
}); 
</script> 

但是定位，這是行不通的。我的所有物品都在另一個之下顯示。這就是我在.isotope-item div上得到的。只有垂直放置，沒有水平放置。

position: absolute; 
left: 0px; 
top: 0px; 
-webkit-transform: translate3d(0px, 1103px, 0px) 

我想弄清楚這是什麼，並希望得到任何幫助。

Answer 1

同位素中的砌體佈局默認使用第一項的寬度。如果這比容器寬度的一半多，它們將全部出現在一列中。

嘗試寬度作爲測試設定爲較小數目：

<script type="text/javascript"> 
$('#isotope').isotope({ 
    layoutMode : 'masonry', 
    masonry: { 
     columnWidth: 5 
    } 
    itemSelector : '.isotope-item' 
}); 
</script> 

一個非常小的數columnWidth的缺點是，同位素創建高度計算，其是慢，使用更多的存儲器更多的列。