div 커닝 알고리즘

Question

빈 포장 알고리즘을 제안하기 전에 요소 순서를 변경하고 원하는대로 배열 할 수 있다고 가정합니다. 주문 및 배열에 대한 제한 사항이 있음을 읽으면서주의하십시오.

분명히 커닝 div와 같은 것은 없지만 생각할 수있는 가장 적절한 용어입니다. 기본적으로 페이지, div 및 imgs 요소가 고정 된 너비와 높이로 많은 요소가 있습니다. 그들은 순서대로 있어야하며 (연대순으로) 왼쪽에서 오른쪽, 위에서 아래로 표시되어야합니다. 공백을 가능한 한 균일하게 만드는 방식으로 요소를 "커닝"하고 싶습니다. 수평으로 구현하는 것은 쉬운 일이지만 수직 공백은 더 어렵습니다. 패킹 된 요소의 가장 바깥 쪽 가장자리 주위의 고르지 않은 초과 공백이 허용됩니다.

저는 정말 바보 같은 해결책으로 생각했습니다. 저는 1000px와 같은 것으로 포장 될 영역의 최대 너비를 설정할 수있었습니다. 그런 다음 1000 개의 인덱스가있는 배열을 유지하여 화면의 픽셀 열의 아래쪽을 추적 할 수 있습니다. 새 요소를 추가 할 때 간격을 약간 늘려야하는지 알 수 있습니다. 왼쪽 또는 오른쪽으로 조금씩 이동하면 위로 이동할 수 있습니다.

내가 말했듯이 그것은 정말 바보 같은 해결책입니다. 내가 사용할 수있는 알고리즘이 있습니까? 아니면 유사한 패킹 문제를 처리해야하는 알고리즘이 있습니까?

UPDATE : 주석 질문 당

. 요소는 임의의 폭과 높이를가집니다. 내 테스트 케이스는 placekitten.com의 이미지로 200 ~ 300 픽셀 범위의 무작위 너비와 높이를 가진 100 개의 이미지 태그를 생성하고 생성 된 순서대로 페이지에 이미지를 정렬하는 것입니다.

html 페이지를 만들고 아래 코드를 머리에 던져 내가 원하는 위치로 이동하십시오. (일반적인 코드 품질에 대한 의견을 말하지 말고 몇 가지 최적화가 있다는 것을 알고 있습니다. 실제로이 코드를 10 분 안에 데모로 함께 던졌습니다.) :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script> 
var maxwidth = window.innerWidth - 80; 
    function justify(row, filled) 
    { 
     var remaining = maxwidth - filled + 30, 
      imgs = $('img',row), 
      margin = Math.floor((remaining/imgs.length)/2); 
     $(imgs).each(function(){ this.style.marginLeft=margin+"px";this.style.marginRight=margin+"px"}); 
    } 

    $(function() 
    { 
     var row = document.createElement('div'), 
      filled = 0; 
     document.body.appendChild(row); 
     for (var i = 0; i < 100; ++i) 
     { 
      var img = document.createElement('img'), 
       width = Math.floor(200 + Math.random() * 100), 
       height = Math.floor(200 + Math.random() * 100); 
      if ((filled + width) > maxwidth) 
      { 
       justify(row, filled); 
       row = document.createElement('div'); 
       filled = 0; 
       document.body.appendChild(row); 
      } 
      filled += width; 
      img.src = "http://placekitten.com/" + width + "/" + height; 
      row.appendChild(img); 
     } 
     justify(row,filled); 
    }) 
</script> 
<style> 
    img{position:relative; vertical-align:middle} 
</style> 

Answer 1

나는 유사한 문제에 사용 된 Masonry Plugin을 보았다.

Columnizer 및 jLayout과 같은 유사한 플러그인을 사용해보세요.

행운을 비네.