按容器高度組織容器內容

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

我已經發布了理想的算法，其中用使用。仍然可以做一些粗略的計算來看清楚容器。

Try this bin

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); 
    } 
    } 
}