あらかじめ定義されたグリッドを持つPackery JS

Question

私は異なるサイズのタイルを持つタイルページを持つウェブサイトを作っています。私はタイル、列の数と行の数を取るjavaScriptを書いています。その後、グリッドを作成し、グリッドにタイルを完全にフィットさせ、小さな1つのブロックタイルでスペアスペースをいっぱいにします。私は終わりを取得すると、列と行などの量に基づいて、サイズとそこcooridantes、

 blocks = [ 
     { 
      element: $('<div class="large"></div>'), 
      width: 3, 
      height: 2, 
      yPos: 0, 
      xPos: 0 
     }, 
     { 
      element: $('<div class="medium"></div>'), 
      width: 2, 
      height: 2, 
      yPos: 0, 
      xPos: 3 
     }, 
     { 
      element: $('<div class="small"></div>'), 
      width: 1, 
      height: 1, 
      yPos: 0, 
      xPos: 6 
     }, 
     { 
      element: $('<div class="small"></div>'), 
      width: 1, 
      height: 1, 
      yPos: 2, 
      xPos: 0 
     } 
    ] 

タイルの配列があり、実際の配列はそれでより多くのを持っており、空白なしで完璧なグリッドを行います底部に沿ってまっすぐです。

これを何らかの形で画面に表示する必要があります。私は最初にテーブルを使用し、行と列の属性の数を使用して、私は必要なサイズの完全なグリッドを作成することができました。唯一の問題は、応答性があり、画面サイズに基づいて列の数を変更することです。私は本当にパッカーがこれをやっているのが好きです。私はpkery.fit（）を使って、座標を設定して要素を渡して欲しいものを達成することができると考えましたが、そのようには動作しません。私がPackeryで達成しようとしていることを私がすることができれば誰でもやっていますか？私はまた、それをより反応的にするためにパーセンテージのサイズを使用しています。

function organizeByPosition(){ 
    addedBlocks.sort(function sortByPosition(a, b){ 
     if (a.positionY == b.positionY) return a.positionX - b.positionX; 
      return a.positionY - b.positionY; 
     }) 
    } 

今私がしなければならないすべてはこれらを追加するpackeryを使用している：Yの優先順位を与えるが座標で

Answer 1

だから最後に、私はタイルオブジェクトの私の配列を取得し、私はそれを注文するソリューションを考え出しましたこの順序とpackery内の項目は、意図したとおりにレイアウトするようだ：

var elements = []; 

    for(var i = 0; i < blocks.length; i++){ 
     if(blocks[i].getWidth() == 3){ 
      elements.push($('<div class="grid-item grid-item--width3"></div>').append('<div class="content"></div>')); 
     } 
     if(blocks[i].getWidth() == 2){ 
      elements.push($('<div class="grid-item grid-item--width2"></div>').append('<div class="content"></div>')); 
     } 
     if(blocks[i].getWidth() == 1){ 
      elements.push($('<div class="grid-item"></div>').append('<div class="content"></div>')); 
     } 
    } 

    var displayGrid = $('.grid'); 
    displayGrid.packery(args2); 
    for(var i = 0; i < elements.length; i++) { 
     displayGrid.append(elements[i]).packery('appended', elements[i]); 
    } 

それは私が特定の座標にフィットしたいとき、私はpackeryをoverthinkingた表示されます。少なくとも私のコードは完全な矩形/正方形のスペースを持たない完全なグリッドを得るために要素を追加する命令を得るための完全な方法として無駄になりませんでした。また、私が書いたコードがランダムなグリッドを生成するので、毎回の更新時に異なる順序でタイルを取得します。