정렬 요소 javascript

Question

내 요소를 정렬하는 방법을 찾고 있지만 소리가 나는 것처럼 쉽지는 않습니다. 내가 그러나 모든 작은 이미지 하나 개의 사업부

xx xx xx 
xx xx xx 
xx xx xx 

첫 번째 열 (6 × 년대) 내부에

내 요소 6 개 요소 (썸네일)별로 그룹화되어

는 각 x는 썸네일을 나타내는 설명하게 볼 때 당신을 기쁘게 단추를 클릭하면 다음 열이 나타나고 이전 열이 사라집니다.

x의 개수가 6으로 나눌 수없는 경우 (예 : 당신이 11 X의의를 가지고, 그것은

xx xx 
xx xx 
xx x0 

(오의) 필러 요소를 추가하는 각 요소에 상관없이 축소판하거나 필러는 다음이

1,2 3,4 5,6 
7,8 9,10 11,12 
13,14 15,16 17,18 

처럼 보이는 자신이 '테이블'에 추가 주문하는 숫자를 나타내는 경우

그러나 초기 페이지에 최신 축소판 (1 -> 6)을 갖고 싶습니다. 최신 (최신 축소판)이므로 먼저 보여 드리겠습니다. 이전의 '테이블'과 같이 할 필요가 의미 ('날짜'에 의해 주문) :

1,2 7,8 13,14 
3,4 9,10 15,16 
5,6 11,12 17,18 

이제 어려움은 그것을 미리없이 단지이 있는지 얼마나 많은 열 순서를 다시하지해야 2 열 또는 10 열. 여기

문제의 라이브 링크입니다 (2 열, 7 썸네일 5 필러) : link text 다음 갤러리를 클릭하면 볼 수 있습니다 '열'1 (6 썸네일)

모든 요소 나는이 정말 아니라는 것을 알고 (썸네일 및 필러) 배열 (자바 스크립트)에 삽입된다 그래서 나는 JS 와 각 요소의 위치의 변경해야 (또는 당신을 위해 쉽게 JQuery와 경우)

간단한 질문, 나는 시도했다. 질문에 대한 질문이 있으시면 언제든지 설명해주십시오. 질문하면 언제든지 답변 드리겠습니다.

편집 : 예. 빈센트 로버트에게 감사드립니다. 내 배열 개체 (내 축소판 그림이 여기에 있음)는 이제 Vincent의 숫자 배열과 같은 방식으로 정렬해야합니다. 배열의 요소를 완벽한 위치에 배치하는 그의 방법을 테스트했습니다. 숫자를 색인으로 사용하지만 그 번호는 없습니다. 누구든지이 작업을 수행하는 방법을 알고 있습니까?

Answer 1

값을 픽셀로 생각해야합니다. 그것들을 정렬하려면 먼저 그들의 위치를 ​​계산 한 다음이 위치를 표의 오프셋으로 변환해야합니다.

일단 오프셋이 있으면 배열을 쉽게 정렬 할 수 있습니다. 여기에 예제 코드 (단순화 0 기반)입니다 :

// Your constants 
var nbGroup = 3, 
    nbCol = 2 
    nbLine = 3, 
    nbPerGroup = nbCol * nbLine; 

function computeOffset(index) 
{ 
    // Search the block 
    var group = Math.round(index/nbPerGroup - 0.5); 
    var groupPos = index % nbPerGroup; 

    // Search the line 
    var line = Math.round(groupPos/nbCol - 0.5); 
    // Search the column 
    var col = groupPos % nbCol; 

    // This formula is dependent on your layout 
    return col 
     + line * nbCol * nbGroup 
     + group * nbCol; 
} 

// Fill an array from 0 to 17 
var array = []; 
for(var i = 0; i < 18; ++i) 
{ 
    array.push(i); 
} 

// Sort our array based on the position offset 
array.sort(function(a, b) 
{ 
    return computeOffset(a) - computeOffset(b); 
}); 


console.log(array); // [0, 1, 6, 7, 12, 13, 2, 3, 8, 9, 14, 15, 4, 5, 10, 11, 16, 17] 

내가 DOM 노드의 실제 정렬을하지 않았다하지만 당신은 당신이 스스로 그것을 할 수있을만큼 스마트합니까입니까? 좋아 ;-)

---

는, DOM 노드의 배열을 정렬, 당신은 당신의 노드의 인덱스에 액세스하거나 계산해야합니다.여기에 솔루션 (테스트되지 않은 코드)입니다 : 나는 대답이 이미 존재 볼

var elements = ... 

var nodes = [] 
for(var i = 0, l = elements.length; i < l; ++i) 
{ 
    nodes.push({ index:i, element:elements[i] }); 
} 

nodes.sort(function(a, b) 
{ 
    return computeOffset(a.index) - computeOffset(b.index); 
}); 

// Your DOM array should be sorted now. 
// Note that you will have to append DOM nodes (yes again) 
// to the document to actually sort the displayed elements. 

var target = ... 

for(var i = 0, l = nodes.length; i < l; ++i) 
{ 
    target.appendChild(nodes[i].element); 
} 

Answer 2

, 나는 약간 덜 계산으로 착수했습니다,하지만이 있다면 나는 확실하지 않았다 단지 올바른 순서로 한 번에 표시에 대한 또는 나중에 물건을 정렬해야하는 경우. 열은 표시 목적으로 만 활동하기 시작 할 ... 나는 확실히 이해입니다

<style type="text/css"> 

    ul { 
     padding: 0; 
     margin: 0 2px 2px 0; 
     overflow: hidden; width: 200px; 
     background-color: red; 
     float: left; 
    } 



</style> 
<script type="text/javascript"> 
    var thumbsDOTlength = 30; 

    var col = 0; 
    var perRow = 6; 

    var html = []; 
    html.push("<ul>"); 
    for(var i = 0; i < thumbsDOTlength; i++) { 
     html.push("<li> Item " + i + " (" + col + "," + (i - col * perRow) + ")</li>"); 

     if(i % perRow == perRow - 1) { 
      html.push("</ul><ul>"); 
      col++; 
     } 
    } 

    html.push("</ul>"); 

    document.write(html.join('')); 

</script>