4

私はこのようなものが欲しい

ここに画像の説明を入力

コンテナボックスは幅と高さが固定されています

ボックスのサイズは、1 * 1 または 2 * 1 または 3 * 3 のように異なりますが、幅が 4 で高さが 3 より大きくはありません

ボックスの数字は、ロード時のボックスのインデックスです

これらの条件のアルゴリズム幅を書いてみました

first - item1 を最初の位置 (0,0) に配置します

2 番目 - 最初のボックスは 2 つの位置を作成します: (0,1) と (1,0)

3 番目 - item2 は 2 つの新しい位置の間で決定し、隙間が少なくなるように最適な位置に収まるようにする必要があります

各アイテムを配置すると、左上隅と右下隅に2つの新しい位置が生成されます

また、コンテナがいっぱいかどうかを確認するために、コンテナとボックスの残りの領域を確認する必要があります

コンテナがいっぱいの場合は、新しいコンテナを作成し、残りのアイテムをそこに置きます

アルゴリズムが失敗した例をいくつか見つけましたが、解決策を見つける必要があります

おそらく、これらのボックスを面積とスペースで並べ替えるのが最も簡単な解決策です

しかし、私はそれがデザインをくちばしにするので好きではありません。つまり、上部に大きなボックスがあり、下部に小さなボックスがあることを意味します:(それは良くありません。さらに、これらのボックスを無限スクロールでロードしたいので、次のボックスサイズがわからないので、できませんエリアに基づいてそれらを配置します

あきらめた後、この種のデザインに関するすべてのプラグインをチェックしました

同位体と石積みとバニラ石積みとグリッドスターのように...

同位体をカスタマイズしてみた

JSfiddle リンクは、リンクの試行を示してい ます

<a href="#" id="good">Shuffle</a> |
<a href="#" id="bad">Original order (broken)</a>
<div id="container">
   <div class="item w1 h1">1</div>    
   <div class="item w2 h1">2</div>
   <div class="item w1 h2">3</div>
   <div class="item w1 h1">4</div>
   <div class="item w2 h2">5</div>
   <div class="item w2 h1">6</div>
   <div class="item w1 h1">7</div>
   <div class="item w1 h1">8</div>
   <div class="item w1 h2">9</div>
   <div class="item w2 h2">10</div>
   <div class="item w2 h1">11</div>
 </div>​

 #container {
   margin: 0 auto;
   border: 2px solid black;
   height: 430px;
   margin: 20px 0 0 0;}

 .item {
  float: right;
  background: #CCC;
  width: 100px;
  height: 100px;
  margin: 10px;}

 .item.w1 {
   width: 100px;}

 .item.w2 {
   width: 200px;}

 .item.h1 {
   height: 100px;}

 .item.h2 {
   height: 200px}

 .isotope,
   .isotope .isotope-item {
   -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
      transition-duration: 0.8s;}

  .isotope {
    -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      transition-property: height, width;}


  .isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
      transition-property:         transform, opacity;}​


$(function(){

$("#good").click(function() {
    $("#container").isotope('shuffle');
    return false;
});

$("#bad").click(function() {
    $("#container").isotope({'sortBy':'original-order'});
    return false;
});

$("#container").isotope({
  layoutMode: 'masonryHorizontal',
  masonryHorizontal: {
    rowHeight: 60
  }
});  });​

しかし、幅と高さを同時に固定することはできないようです

ボックス間のマージンを等しく保ち、変更しないようにしたいので、それは私にとって重要です

また、ブラウザの高さを検出し、変数の高さではなく、これらの 3 つの状態だけで高さを変更したい

5列、4列、3列

私の質問:

まず、このアルゴリズムを自分で書くことができてとてもうれしいので、このアルゴリズムの最適な解決策を詳細に見つけるのを手伝ってください??

この2日間で色々試しました

2 つ目 - これらのプラグインの 1 つを期待どおりにカスタマイズできますか?またその方法は??

4

2 に答える 2

6

最も単純なのは、kd-tree を使用して、ツリーを垂直および水平のユークリッド 2d 空間に分割することです。次に、長方形を作成したスペースの 1 つにパックし、ツリーを再帰的に再分割できます。オンラインで入手できる Jquery ツリーマップ プラグインの例があります。jquery プラグイン masonry でも同じことができますが、1D ビン パッキング ソルバーに似ています。2D ビン パッキングははるかに複雑で、四角形を回転させることも意味します。ライトマップをパッキングする例を次に示します: http://www.blackpawn.com/texts/lightmaps/default.html。より良いパッキングを実現するために、desc、asc、random などの順序でサイズを並べ替えることができます。これにより、別のツリーマップも作成されます。

于 2012-12-31T00:33:54.163 に答える
3

私は同様の問題を抱えており、この正確なことのためにjQueryプラグインを作成しました。いくつかの改良が行われる可能性がありますが、それはあなたを正しい方向に向けるでしょう -

プラグイン - https://github.com/DrewDahlman/Mason

理論に関するブログ投稿 - http://www.drewdahlman.com/meusLabs/?p=218

于 2013-01-03T17:56:41.750 に答える