첫 번째 요소를 이동하지 않고 동위 원소 리조트

Question

isotope lib를 구현하려고하는데 요소가 내 메뉴를 정렬합니다. 몇 가지 연구와 툴링을 한 후 동위 원소 컨테이너의 첫 번째 요소를 메뉴 항목으로 설정하기로했습니다. 그런 다음 필자가 필터링이나 정렬 작업을 수행 할 때 필터링합니다.

필자는 코너 스탬핑의 제한으로 인해 코너 스탬프 방법과 반대되는 방법을 선택했다. (필자가 이해 한 바로는 - 필자는 단지 그것을 사용하지 않을 수 있었다.). 메뉴가 왼쪽 상단 구석에있게하고 싶습니다.

내가 겪고있는 문제는 섞여 있습니다. 첫 번째 요소 (이 예제에서는 메뉴)를 제외하고 모든 요소의 위치를 ​​무작위로 지정하려고합니다. 나는 그 자리에 메뉴를 유지하고 싶다. 셔플을 사용하여 모든 요소의 순서를 무작위로 변경하려고하면 사용 가능한 목록의 메뉴 항목을 걸러 낼 수 없습니다. 이것은 서브 네비게이션이 날아 가기로 결정할 때 몇 가지 탐색 문제를 야기합니다. 지금까지 해봤 http://jsfiddle.net/ufomammut66/xwpuk/30/

: 여기

는 예를 들어 레이아웃입니다 $('.container').isotope('shuffle');

이 기능은 단 1 개 매개 변수가 - 콜백을. 내가 여기서 어떻게 선택 과정을 조작 할 수 있는지 모르겠다.

정렬 기능 사용을 고려해 보았습니다. 그러나 어떤 이유에서든 $('.container').isotope({ sortBy : 'random' });을 두 번 이상 발사 할 수 없습니다. 비록 내가 했어도 나는 이것을 내가 메뉴를 걸러 내기 위해 어떻게 활용할 수 있는지 아직도 알지 못한다.

도움을 주시면 감사하겠습니다.

편집 : 정렬 가능한 개체에 숫자를 포함하도록 jsFiddle 링크가 업데이트되었습니다. 정렬 작업을 표시하는 데 도움이됩니다.

EDIT 2 : 발행 할 세부 정보 추가.

Answer 1

나는 그것이 이미 완료된 정렬을 다시 계산할 필요가 없도록 동위 원소 캐시 정렬을 믿습니다. 그것은 심지어 보이는 "무작위"에 이것을 않습니다.

수정 사항/해킹은 무작위 분류 한 후 reloadItems이다 :

$('#reorder').click(function() { 
    $('.container').isotope({sortBy: 'random'}).isotope('reloadItems'); 
}); 

데모 : 메뉴 항목을 필터링으로 http://jsfiddle.net/nT66r/

는, 임의 단순히 임의의 숫자를 반환, 그래서 많은이없는 넌 할 수있어. 그러나, 당신은 당신이 메뉴를 "필터링"할 수 있도록 해주는 사용자 정의 임의 종류를 작성할 수 있습니다

getSortData: { 
    name: function ($elem) { 
     return $elem.data('name'); 
    }, 
    myrandom: function ($elem) { 
     if($elem.hasClass('menu')) { 
      return -1; 
     } 
     return Math.random(); 
    } 
} 

데모 : http://jsfiddle.net/PvnMn/

주, menu 클래스이기 때문에, 당신은 자신이 몇 가지 가능한 불확실성 오픈 떠나 menu 개의 항목이 여러 개있는 경우 당신이 가지고있는 경우에, ID는 더 나은 선택이다. 이 경우 $elem.hasClass('menu') 대신 $elem.is('#menu')을 사용하십시오.#menu와

: http://jsfiddle.net/jtbowden/Vuqgu/