同位素網格佈局使用空白

Question

我有一個網格（3x3），它是300px，每個網格域是100px寬。

它很容易解釋，如果你在這裏看看jsfiddle。 加載佈局同位素其工作正常，但如果您點擊例如li元素＃2網格將被求助，但沒有正確使用它的空間。

爲什麼旁邊li 3和空白區域？ li 4將適合在那裏！ 思想同位素將處理這個？如何得到這個？

感謝您的幫助！ frgtv10

http://jsfiddle.net/pEZtj/

Answer 1

問題是與你適合高階函數。當你點擊2時，它將它的順序設置爲2.5（索引1 + 1.5），它仍然小於4的順序（索引3）。同樣的事情適用於3的順序爲2.

要解決此問題，您需要更復雜的順序功能。假設你只需要這個工作四個元素，下面的代碼應該工作。

if(index == 0) { //element 1 should appear first 
     order = 0; 
} 
else if ($item.hasClass('large') && index % 3 == 1) { 
     order = index + 2.5; 
} 
else if ($item.hasClass('large') && index % 3 == 2) { 
     order = index + 1.5; 
} 
else { 
     order = index; 
} 

編輯：爲了使代碼更漂亮一點，並支持任何規模的行可以進行排序的功能是這樣的：

int columns = 3; 
if(index % columns == 0) { //element 1 should appear first 
     order = index; 
} 
else if ($item.hasClass('large')) { 
     order = index + columns - (index % columns) + .5; 
} 
else { 
     order = index; 
}