컨테이너 높이별로 컨테이너 내용 구성

Question

관련 콘텐츠가 각각있는 2 개의 컨테이너가있는 사이트가 있습니다. 어떤 콘테이너가 어떤 콘테이너에 들어가는가의 구성은 중요하지만 콘테이너가 가능한 한 높이에 가깝지 않도록 중요합니다.

코드 :

<button>Click to add more boxes</button> 
<div id="wrapper" align="center"> 
    <div id="container1"> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
    </div> 
    <div id="container2"> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
    </div> 
</div> 

---

Jsfiddle

---

질문 :

당신은 더 많은 항목을 추가 한 후에 볼 수

만 때로는 하나 개의 컨테이너는 다른 것보다 훨씬 더 많은 콘텐츠를해야합니다 그러나 그것은 일어난다.

큰 컨테이너의 왼쪽 항목을 가져 와서 각 컨테이너의 높이를 서로 가깝게 만드는 방식으로 컨테이너에 배포하고 싶습니다.

어떻게 할 수 있습니까?

Answer 1

해결을위한 표준 알고리즘 Subset Sum Problem이 있습니다.

문제는 여기에 비슷한 문제가 참조

You have n integers. Divide n integers into two sets such that |Set1| - |Set2| is minimum. where |Set(i)| represents the sum of elements in ith set. 

을 말한다. 컨테이너를 두 세트로 가정하고 각 상자 높이를 정수로 넣어 그 세트에 넣을 것입니다. 문제는 두 컨테이너의 높이가 최소로 유지되는 방식으로 정수 (상자)를 나누어야한다는 것입니다.

관련 링크 :

Subset Sum Problem - Wiki

Geeks for Geeks tutorial - 좋은 내가 사용 사용되는 이상적인 알고리즘을 게시 한

Answer 2

. 컨테이너를 깔끔하게 보이기 위해 여전히 대략적인 계산을 수행 할 수 있습니다. 흥미로운 문제에 대한 JS 코드

var $container1 = $('#container1'); 
var $container2 = $('#container2'); 
$('.box').each(function(){ 
    $(this).height(100 * Math.random()); 
}); 
var move = $container1.outerWidth(); 
$container2.css("margin-left",move + 10); 

// Let us try to minimize the height difference 
var h1 = $container1.height(); 
var h2 = $container2.height(); 
var diff = 20; 

var currentDiff = h1-h2; 
if (currentDiff > diff) { 
    alert('1 is bigger than 2'); 
    reArrange($container1, $container2, Math.abs(currentDiff), diff); 
} 
if (currentDiff < -diff) { 
    alert('2nd is bigger than 1st'); 
    reArrange($container2, $container1, Math.abs(currentDiff), diff); 
} 

// Logic: Send the minium height box to smaller container 
function reArrange(largeC, smallC, currentDiff, diff) { 
    var minHeightBox = null; 
    var minH = 10000000000; 

    $('.box', largeC).each(function(){ 
     if ($(this).height() < minH) 
     minHeightBox = this; 
     minH = $(this).height(); 
    }); 

    // If transfering this to other reduces the difference, transfer this otherwise returh false 
    if (minHeightBox !== null) { 
    var newDiff = (largeC.height() - minH) - (smallC.height() + minH); 
    newDiff = Math.abs(newDiff); 
    console.log(newDiff); 
    if (newDiff < currentDiff) { 
     smallC.append(minHeightBox); 
     currentDiff = largeC.height() - smallC.height();  
     //Recursively call the method 
     if (currentDiff > diff) 
     reArrange(largeC, smallC, currentDiff, diff); 
    } 
    } 
}