检测间隔网格

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的高度相等，这只会工作。