2

私は、それぞれが関連するコンテンツの束を持つ 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>

ジャスフィドル

質問：

項目を追加すると、一方のコンテナーのコンテンツが他方のコンテナーよりも大幅に多くなる場合がありますが、それは実際に起こります。

その場合は、残りのアイテムをより大きなコンテナに取り、各コンテナの高さが互いにできるだけ近くなるようにコンテナに配布したいと考えています。

どうすればそれを行うことができますか？

4

2 に答える 2

0

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.

ここで同様の問題があることがわかります。コンテナーを 2 つのセットとして想定し、各ボックスの高さをそのセットに入れる整数として想定します。問題は、2 つのコンテナーの高さが最小になるように整数 (ボックス) を分割する必要があることです。

関連リンク:

部分和問題 - Wiki

Geeks for Geeks のチュートリアル- Good One

于 2013-06-22T01:44:24.297 に答える
0

使用されていた理想的なアルゴリズムを投稿しました。それでも、コンテナをきれいに見せるために、大まかな計算を行うことができます。

このビンを試す

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);
    }
  }
}
于 2013-06-22T02:32:31.620 に答える