절대 위치 요소가 떠 다니는 것처럼 동작합니다.

Question

이 모든 상자를 떠 다니는 것처럼 동작하게하고 싶습니다. 그러나, 그들이 될 수 없어, 그들은 절대적으로 내가이 위치 번호와 상호 작용하기 위해 위치해야합니다. 창 크기를 조정할 때

var $item = $('#wrapper div'), 
    len = $item.length, 
    itemWidth = $item.innerWidth(), 
    winWidth = $('#wrapper').innerWidth(), 
    cols = Math.floor(winWidth/itemWidth), 
    moveX = itemWidth + 10; 

function absPos() { 
    for (var i = 0; i < len; i += 1) { 
     $('.item-' + i).css({ 
      'position' : 'absolute', 
      'left' : moveX * i 
     }); 
    } 
} 

난 그냥 또 다시 위치에 맞도록 포장하는 방법을 알아낼, 그리고 수

여기 내 시도입니다.

여기에 데모가 있습니다. http://jsfiddle.net/Fgcqs/3/. absPos() 함수를 취소하면 내 시작을 볼 수 있습니다.

도움 주셔서 감사합니다.

Answer 1

jsfiddle을 편집하여 플로팅 된 항목을 이동했습니다. 그것은 당신의 여백을 가정하고 폭 래퍼 내에서 div의 각각에 대해 동일하고 CSS를

var wrapper = $('#wrapper'), 
    items = wrapper.children('div'), 
    len = items.length, 
    itemWidth = items.innerWidth() + parseInt(items.css('margin-left')) + parseInt(items.css('margin-right')), 
    itemHeight = items.innerHeight() + parseInt(items.css('margin-top')) + parseInt(items.css('margin-bottom')); 

items.css('float', 'none'); 


function absPos() { 
    var cols = Math.floor(wrapper.width()/itemWidth); 
    items.each(function() { 

     var left = ($(this).index() % cols) * itemWidth; //the bit in brackets calculates which column the div should be in (the remainder of the current index of your item divided by the number of columns per row), then you times that by item width as worked out above, you use the index as this will allow you to start at left:0 

     var height = Math.floor($(this).index()/cols) * itemHeight //the bit in brackets calculates which row the div should be in, then you times that by item height as worked out above, you use the Math.floor as this will allow you to start at top:0. Should have really called this top! 

     $(this).css({ 
      'position' : 'absolute', 
      'top': height, 
      'left': left 
     }); 
    }); 

    wrapper.height((Math.ceil(len/cols)) * itemHeight); 
} 

$(window).resize(function() { 
    absPos(); 
}); 
absPos(); 

http://jsfiddle.net/Fgcqs/12/

Answer 2

당신은 모두 column index 및 row index를 추적 할 수 있습니다 column index * item width이 column index를 재설정하고 다음 행을 시뮬레이션 row index을 증가, window width을 초과하면. 당신의 가 값을 왼쪽 플러스 항목의 폭이 최고 가치를 소개하는 경우에 대비하여 컨테이너의 폭을 초과하는 경우

function absPos() { 
    var colIndex = 0; 
    var rowIndex = 0; 
    for (var i = 0; i < len; i += 1) { 
     if (moveX * colIndex + itemWidth > winWidth) { 
      colIndex = 0; 
      rowIndex++; 
      top += itemHeight + 10; 
     } 
     var left = moveX * colIndex; 
     var top = moveY * rowIndex; 
     $('.item-' + i).css({ 
      'position' : 'absolute', 
      'left' : left, 
      'top' : top 
     }); 
     colIndex++; 
    } 
} 

http://jsfiddle.net/N4S4L/1/

Answer 3

당신은 확인해야합니다 : 다음은이 방법의 간단한 예입니다 을 0으로 설정하여을 0으로 설정하여 새 행을 작성하십시오.