자바 스크립트는

Question

여기 성공적으로 내가 뭘하려고 오전 않는 바이올린의 2 · 4 루프에 appendChild을 무시 : http://jsfiddle.net/WoofurrBro/qcf4qcm6/2/

을 그리고 여기에 작동하지 않습니다 내 설정입니다.

코드를 실행하기 전에

function align() { 
 
    var x = document.getElementById('container').offsetWidth; 
 
    var y = document.getElementsByClassName('box')[0].offsetWidth; 
 
    var z = Math.floor(x/y); 
 
    // finds # of columns 
 

 
    for (var i = 0; i < z; i++) { 
 
     document.getElementById('container').innerHTML += '<div class=col style="width:' + y + 'px;float:left;"></div>'; 
 
    }; 
 
    // creates columns 
 

 
    var columns = document.getElementsByClassName('col'); 
 
    var boxes = document.getElementsByClassName('box'); 
 
    // variables for later use 
 
    /////////////////////////////////////////////////////////////////////////////// 
 
    for (var i = 0; i < boxes.length; i++) { 
 
     var minIndex; 
 
     var column = []; 
 
     // minIndex = shortest column, column[] to sort NodeList 
 

 
     for (var iii = 0; iii < columns.length; iii++) { 
 
      column[iii] = columns[iii].clientHeight; 
 
     }; 
 
     // converts columns[] (NodeList) to column[] (Array) 
 

 
     column.sort(function (a, b) { 
 
      return a - b; 
 
     }); 
 
     // sorts the column[] array 
 

 
     for (var ii = 0; ii < columns.length; ii++) { 
 
      if (column[0] == columns[ii].clientHeight) { 
 
       minIndex = ii; 
 
       break; 
 
      }; 
 
     }; 
 
     // picks the first item in the column[] array (shortest) and finds the index of it in columns[] NodeList 
 

 
     boxes[i].style.visibility = 'visible'; 
 
     //ALSO, placing this under the appendChild string causes weird bugs (?) 
 
     boxes[i].innerHTML += i + 'h'; 
 
     columns[minIndex].appendChild(boxes[i]); // !!!!!!!!!!!!!! SEEMS TO IGNORE THIS appendChild 
 
     //places them and adds identification 
 
    }; 
 
    /////////////////////////////////////////////////////////////////////////////// 
 
}; 
 

 
window.onload = align;

* { 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    cursor:default; 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 
html { 
 
    background-color:#20293F; 
 
} 
 
#title { 
 
    text-align:center; 
 
    padding-top:40px; 
 
    font-size:60px; 
 
    margin-bottom:10px; 
 
} 
 
#description { 
 
    font-size:14px; 
 
    text-align:center; 
 
    margin:0 auto 30px auto; 
 
    max-width:450px; 
 
} 
 
.box { 
 
    width:250px; 
 
    word-wrap:break-word; 
 
    background-color:rgba(0, 0, 0, 0.30); 
 
    margin:10px 0 10px 0; 
 
} 
 
col { 
 
    margin:0 10px 0 10px; 
 
} 
 
#containerwrap { 
 
    background-color:rgba(0, 0, 0, 0.30); 
 
    min-width:800px; 
 
    width:100%; 
 
} 
 
#container { 
 
    overflow:hidden; 
 
    width:800px; 
 
    margin:0 auto; 
 
} 
 
.postTitle { 
 
    text-align:center; 
 
    font-size:30px; 
 
    color:#5F70A6; 
 
} 
 
.postBody { 
 
    padding:10px; 
 
    font-size:12px; 
 
    color:#5F70A6; 
 
}

<div id="containerwrap"> 
 
    <div id="container"> 
 
     <div class="box"> 
 
      <h2 class="postTitle">11 boots</h2> 
 

 
      <div class="postBody"> 
 
       <p>11 bbooots</p> 
 
      </div> 
 
     </div> 
 
     <div class="box"> 
 
      <h2 class="postTitle"></h2> 
 

 
      <div class="postBody"> 
 
       <p>22 sweg</p> 
 
      </div> 
 
     </div> 
 
     <div class="box"> 
 
      <h2 class="postTitle"></h2> 
 

 
      <div class="postBody"> 
 
       <p><span></span><span></span><span>33 thisisadivthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimetocopythisshitsorries<span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span><span>divthingwithoutanyspanssodontevenexpectthehtmltogeneratespanslikeitdidlasttimebitchtimeto</span></span> 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="box"> 
 
      <h2 class="postTitle">44 ether</h2> 
 

 
      <div class="postBody"> 
 
       <p>44 infinite, silk-smooth darkness covers your eyes as you float in the skies 
 
        <br>lightning bolts of pleasure and happiness strike you, through your senses, as each rain drop pops silently on your skin 
 
        <br>the windy silence cloak guards your peace as you rest in the sky, floating upwards and feeling the rain drops pop and the air flowing around you with kind love, giving you calmness and calmness again 
 
        <br>this sea of magic around you might not be, but does it matter, if that’s what’s on your mind. you let it stay and you float, you float away, as you let it be 
 
        <br>and it strikes you that you are where your mind is and your mind is here, here in this magic place, as the raindrops pop lightning on your skin, you allow it to be, might you never leave, but if you ever left, might you come back to be here once more 
 
        <br>just close your eyes</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

는 상자 순서 (11) (22) (33) (44)에서 시작하고, 동적으로 세 개의 열을 생성하고 중로는 한 번에 하나씩 배치 스크립트를 원하는 각 단계에서 가장 짧은 열.

그러나 두 개의 상자 만 열에 배치됩니다. 22 개와 44 개의 상자는 완전히 무시되며 이유는 모르겠습니다.

제대로 작동하려면 어떻게해야합니까?

Answer 1

appendChild()은 무시되지 않습니다. 동일한 요소에서 반복적으로 사용됩니다.

는 11 상자의 하단 모서리에 보면, 당신은 볼 수 있습니다 :

0h2h3h 

귀하의 i + "h" 텍스트 boxes[i]가 같은 상자를 말합니다 즉, 같은 상자에 3 회 추가지고은 루프를 3 번 ​​반복하는 동안 발생합니다.

어떻게 될 수 있습니까? 여기서 문제는 boxes이 배열이 아니라는 것입니다. 그것은 HTMLCollection, 그리고 그 내용의 순서는 현재의 순간에 DOM에서 요소의 순서 반영 다음 HTML DOM에

HTMLCollection을 라이브입니다; 기본 문서가 변경되면 자동으로 업데이트됩니다.

Source

그래서이 일어나고있는 것입니다 :

귀하의 상자가 순서대로 시작합니다

이

[original boxes] 11 22 33 44 [columns] 

그래서 첫 번째 반복에, boxes[i]는 11 상자이며이 추가됩니다 첫 번째 열에. 다음 반복에

[original boxes] 22 33 44  [columns] 11 

, boxes[i]가 (일명 boxes[1]) 33 상자이며이 두 번째 열에에 추가되는, 그리고 순서는 다음과 같습니다 : 지금 순서는 다음 반복에

[original boxes] 22 44 11  [columns] 11 33 

boxes[i] (= boxes[2])은 의 다시 상자이며 세 번째 열에 추가됩니다.

마지막 반복에

[original boxes] 22 44   [columns] 33 11 

는 boxes[i] 아직 다시 11 상자이며, 그것은 첫 번째 열에 추가 것 : 순서는 지금

[original boxes] 22 44   [columns] 11 33 

을 그리고 그 이야기의 끝입니다.

---

이유 왜 jsfiddle 작품과 텀블러 페이지하지 않습니다 당신의 텀블러 페이지에 대상 컨테이너가 후 상자 '시작 위치이지만, jsfiddle에, 컨테이너가 이전 때문이다 상자들, 그래서 움직이지 않는 상자들은 그들의 서수 위치를 전체 시간 동안 유지합니다. 여기

은 컨테이너 박스 이후로 이동할 경우 jsfiddle이 무엇이다 : 이것에 대한

http://jsfiddle.net/qcf4qcm6/3/

---

수정은 간단합니다.

var boxes = document.getElementsByClassName('box'); 
boxes = Array.prototype.slice.apply(boxes); 

그렇게, 모든 것이 확실히 작동합니다 : 그냥 당신이 그것을 사용하기 전에 배열로 boxes을 변환합니다.

http://jsfiddle.net/myqakknr/2/