重新佈局項目進行同位素，似乎並沒有保持結構

我已經打有關同位素有點 http://isotope.metafizzy.co/demos/relayout.html ，並已試圖建立保持一個固定大小的父容器，總是有6小件物品，並重新洗牌以適應第七大項目。重新佈局項目進行同位素，似乎並沒有保持結構

這裏是我到目前爲止對的jsfiddle http://jsfiddle.net/pedalpete/LGBg6/

我希望會發生的是，點擊任何塊後，在任意一排更小的塊的總數將是3

由於某種原因，無論是用戶.isotope（'調整大小'）還是像我一樣重新創建同位素，我最後一行的數字大於3，因此這些項目沒有進行均勻排序。

我會認爲這種安排在訴諸手段之後會有點靜態的。有沒有辦法讓同位素服從綁定盒的寬度和高度參數？

來源

2011-02-24 pedalpete

請參閱http://jsfiddle.net/desandro/S5vAG/爲我的解決方案。

有沒有辦法讓同位素服從綁定盒的寬度和高度參數？

第一步是禁用同位素調整容器大小。設置resizesContainer選項false。

現在要完成將這些塊裝入容器，有幾種方法可以做到這一點。你可以建立你自己的layoutMode，或者你可以試着玩弄排序。這是我所採用的解決方案。

我也使用了不同的layoutMode，fitColumns，我認爲它更適合你的目標。使用getSortData參數的邏輯是，如果該物品的類別爲large並且是偶數物品，則會將其推回到下一列。所以2,4,6都會在它們很大時放入下一列。

getSortData : { 
    fitOrder : function($item) { 
    var order, 
     index = $item.index(); 

    if ($item.hasClass('large') && index % 2) { 
     order = index + 1.5; 
    } else { 
     order = index; 
    } 
    return order; 
    } 
},

來源

2011-02-24 17:01:03 desandro

太棒了！我有一個關於這個概念的問題：你能夠調整未被點擊的.items，而不是改變div的位置。我正在尋找類似這樣的東西：http://www.adidas.com/us/homepage.asp – Tom 2011-07-14 02:54:43

@Tom是的，你可以嘗試通過自定義佈局模式來實現你想要處理佈局的任何邏輯。請參閱http://isotope.metafizzy.co/docs/extending-isotope.html – desandro 2011-07-14 15:43:45

我是否可以摺疊項目而不是讓窗口切換？我看到你可以有自定義的佈局，所以我可以按照我想要的順序排列圖像，但是如何調整項目大小？ – Tom 2011-07-14 16:22:23

重新佈局項目進行同位素，似乎並沒有保持結構

回答

相關問題