檢測間隔網格

Question

編輯解決方案已被發現！

這是關於它的blog post，這裏是Github repo！

我正在創建由多個大小的框組成的網格，這些大小設置爲高度和寬度 - 但會動態生成，因此每次頁面加載時都會有不同的網格。

我的問題 - 我試過使用砌體，但它捲起留下的空白，也試過同位素。我目前正在浮動導致佈局中斷的左側元素。

它是如何建成 - 我計算的屏幕尺寸，並確定從1到6的頁面最好的列數，然後根據該列寬我算一個「塊」這個塊本質上是完美的網格。然後我遍歷我的元素，並給他們1x1,1x2,2x2尺寸。

僅供參考這裏是另一個隨機生成的網格

我的問題 - 是否有檢測缺少空間的好辦法 - 目前我在把我的紅色和黑色的盒子另一個我的「塊」網格，這是綠色的，讓我看看我缺少空間。我已經閱讀過關於揹包裝箱問題以及裝箱問題 - 而且我很難理解其中的任何一種。

我試過了 - 我試圖計算，因爲我放置塊來確定最佳尺寸，但這仍然會導致奇怪的行爲。我也嘗試使用砌體和同位素。

我很好，有一個衣衫襤褸的底部邊緣，但實際的網格不能包含任何間隙。

注意 - 網格由潛在的無限數量的元素組成 - 我一直在考慮是否要從底部區域獲取元素並將其複製到缺失的區域中，以避免「轉移「元素 - 我只需要知道如何找到缺失的空間。

任何幫助或指向正確的方向將是偉大的！

這裏是一個jsfiddle

這裏是JS的基本代碼...

(function() { 
    GRID = function(el, sel) { 
     var self = this, 
      ran, ranSize, h, w; 

     self.options = { 
      el: $(el), 
      sel: $(sel), 
      cols: 1, 
      block: { 
       height: 0, 
       width: 0 
      }, 
      matrix: { 
       w: [], 
       h: [], 
       t: [], 
       l: [] 
      }, 
      row: { 
       height: 0, 
       width: 0 
      }, 
      col: { 
       height: 0, 
       width: 0 
      } 
     }; 

/* 
     * Size array 
     */ 
     self.sizes = []; 
     self.sizes[0] = [2, 2]; 
     self.sizes[1] = [1, 2]; 
     self.sizes[2] = [1, 1]; 



     self.setup = function() { 

/* 
      * Setup all options 
      */ 
      // block size 
      self.options.block.height = (window.innerWidth/self.cols())/1.5; 
      self.options.block.width = (window.innerWidth/self.cols()); 

      // row 
      self.options.row.width = window.innerWidth; 


      for (var i = 0; i < 60; i++) { 
       $(".grid").append('<div class="box"></div>'); 
      } 

      self.size_boxes(); 


     } 
     self.size_boxes = function() { 

      if (self.cols() == 1) { 
       self.options.sel.height(self.options.block.height); 
       self.options.sel.width(self.options.block.width); 
      } 
      else { 
       self.options.sel.each(function() { 

        $this = $(this); 

        ran = Math.floor(Math.random() * self.sizes.length); 
        ranSize = self.sizes[ran]; 

        if ($this.hasClass('promoted')) { 
         ran = 0; 
        } 
        if ($this.hasClass('post')) { 
         ran = 2; 
        } 
        h = self.options.block.height * self.sizes[ran][6]; 
        w = self.options.block.width * self.sizes[ran][0]; 

        // box sizes 
        $this.height(h); 
        $this.width(w); 
       }); 
      } 
      $(".grid .box").height(self.options.block.height); 
      $(".grid .box").width(self.options.block.width); 
     } 
     self.cols = function() { 
/* 
      * Determine cols 
      */ 
      var w = Math.floor(window.innerWidth); 
      var cols = 0; 

      if (w < 480) { 
       cols = 1; 
      } 
      else if (w > 480 && w < 780) { 
       cols = 2; 
      } 
      else if (w > 780 && w < 1080) { 
       cols = 3; 
      } 
      else if (w > 1080 && w < 1320) { 
       cols = 4; 
      } 
      else if (w > 1320 && w < 1680) { 
       cols = 5 
      } 
      else { 
       cols = 6; 
      } 
      return cols; 
     } 
     self.resize = function() { 
      $(".grid").height(window.innerHeight); 
      self.options.block.height = (window.innerWidth/self.cols())/1.5; 
      self.options.block.width = (window.innerWidth/self.cols()); 

      self.options.row.width = window.innerWidth; 

      self.size_boxes(); 
     } 

     self.setup(); 
     return self; 

    }; 
})(); 
var _GRID = new GRID('.gallery', '.box');​ 

Answer 1

我會跟蹤你的「完美網格」的布爾值的內存矩陣。該矩陣存儲空格是否被填充。無論您何時放置其中一個箱子，都可以計算哪些方塊被佔用並更新矩陣。

Answer 2

如果你放在每欄，只需將申報單中列。舉例來說，如果你已經確定，應該有4列：

<div> 
    <div>Column 1, Div 1</div> 
    <div>Column 1, Div 2</div> 
    <div>Column 1, Div 3</div> 
    <div>Column 1, Div 4</div> 
</div> 
<div> 
    <div>Column 2, Div 1</div> 
    <div>Column 2, Div 2</div> 
    <div>Column 2, Div 3</div> 
    <div>Column 2, Div 4</div> 
</div> 
<div> 
    <div>Column 3, Div 1</div> 
    <div>Column 3, Div 2</div> 
    <div>Column 3, Div 3</div> 
    <div>Column 3, Div 4</div> 
</div> 
<div> 
    <div>Column 4, Div 1</div> 
    <div>Column 4, Div 2</div> 
    <div>Column 4, Div 3</div> 
    <div>Column 4, Div 4</div> 
</div> 

當然，如果在各列的div的高度相等，這隻會工作。