float을 시뮬레이트하는 방법 : javacript의 상단

Question

나는 플로팅하려는 항목이 많지만 이상적으로는 왼쪽에서 오른쪽으로 위에서 아래로 쌓아두기를 원합니다. 떠 다니는 왼쪽은 오른쪽에서 왼쪽에서 오른쪽으로 쌓입니다.

네이티브 코드 또는 jQuery의 javascript에서 css float : top 속성을 시뮬레이트 할 수 있습니까?

예제 코드 :

<style> 
*{margin:0;padding:0;} 
ul { 
    height:80px; 
    width:350px; 
    margin:10px; 
    padding:0; 
    outline:1px solid; 
} 
li{ 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:3px 5px; 
} 
</style> 
<ul> 
    <li>1679</li> 
    <li>1682</li> 
    <li>1732</li> 
    <li>1761</li> 
    <li>1773</li> 
    <li>1781</li> 
    <li>1788</li> 
    <li>1791</li> 
    <li>1797</li> 
    <li>1799</li> 
    <li>1832</li> 
    <li>1861</li> 
    <li>1873</li> 
    <li>1879</li> 
    <li>1881</li> 
    <li>1882</li> 
    <li>1888</li> 
    <li>1891</li> 
    <li>1897</li> 
    <li>1899</li> 
    <li>1932</li> 
    <li>1932</li> 
    <li>1961</li> 
    <li>1961</li> 
</ul> 

비슷한 질문 here가 있지만, 오히려 솔루션을 기반으로 JS보다 CSS 솔루션의 더 찾고있는 것 같다. 또한 this question은 레이아웃 수정의보다 구체적인 구현입니다.

Answer 1

그래서, 당신이 할 수있는 일이 .. 조금 도움이 될 것입니다

var origionalX = 100; 
var origionalY = 200; 
var columns = 10; 
$("li").each(function(i){ 
    var x = origionalX+parseInt(i/columns)*$(this).width(); 
    var y = origionalY+(i%columns)*$(this).height(); 
    $(this).css({position : "absolute", left : x, top : y}); 
}); 

희망 리튬의 모든 이상 루프 당신이 원하는 위치에 배치합니다. 좀 더 구체적인 것을 원한다면 자유롭게 의견을 말하면 내가 도울 수 있는지 알게 될 것입니다. :]

Answer 2

css3 다중 열을 조사해야합니다. http://caniuse.com/#search=column

https://developer.mozilla.org/en/CSS3_Columns

Answer 3

하면 스마트 columms을 만들 수 있습니다 자바 스크립트 사용. 여기에 부드러운 열을 보장 서로 다른 높이와 각 리튬의 폭에 적응하는 jsfiddle는 다음과 같습니다 http://jsfiddle.net/rgthree/hAeQ2/

var list, currentColLeft, currentColTop, nextColWidth; 
currentColLeft = currentColTop = nextColWidth = 0; 
list = $('ul#list'); 
$('ul > li').each(function(i, el){ 
    var h, w; 
    h = $(el).outerHeight(); 
    w = $(el).outerWidth(); 
    if(currentColLeft + w > nextColWidth){ 
     nextColWidth = currentColLeft + w; 
    } 
    if(currentColTop + h > list.innerHeight()){ 
     currentColTop = 0; 
     currentColLeft = nextColWidth; 
     nextColWidth = 0; 
    } 
    $(el).css({'float':'none','position':'absolute','top':currentColTop,'left':currentColLeft}); 
    currentColTop += h; 
}); 

Answer 4

가 바퀴를 재발견하지 마십시오!

http://masonry.desandro.com/

jQuery를 벽돌은 설명하는지 정확히 않습니다. 또한 구현하기가 쉽습니다. 그래도 마크 업을 약간 변경해야 할 수도 있습니다.

는

Answer 5

이 목록

function layout(oList) { 
    var column = 0, 
     top = 0, 
     bottomMargin=20, 
     width = 300; 

     $(oList).each(function() { 
      if (top !=0 && $(this).height() + top > $(window).height()) { 
       top = 0; 
       column += 1; 
      } 
      $(this).css("top", top + "px"); 
      $(this).css("left", (column * width) + "px"); 
      top = top + $(this).height() + bottomMargin; 
     } 
    ); 

}