Javascript 检测div网格中的间隙

编辑已找到解决方案

这是一个关于它的故事，这是故事

我正在创建一个由多个大小的框组成的div网格，这些大小是设置高度和宽度的，但是是动态生成的，因此每次加载页面时都有一个不同的网格

我的问题- 我试着用砖石，但结果留下了缺口，我也试过了。我目前正在浮动元素，这导致布局中的中断

它是如何建造的- 我计算屏幕尺寸并确定页面的最佳列数，范围从1到6，然后根据该列宽度计算“块”，该块基本上是完美的网格。然后我循环我的元素，给它们1x1，1x2，2x2维

这里有另一个随机生成的网格供参考

我的问题- 是否有一个好方法来检测丢失的空间-目前我正在将我的红色和黑色框放置在另一个绿色的“块”网格上，以便我查看丢失的空间。我读过关于背包包装问题以及箱子包装问题的书，我很难理解其中的任何一个

我所尝试的- 我试图在放置块时进行计算，以确定最佳大小，但这仍然会导致奇怪的行为。我也尝试过使用砖石和同位素

我很好，底部边缘参差不齐，但实际网格不能包含任何间隙

注意-网格由可能无限多的元素组成-我一直在想，如果我要从底部区域获取并复制一个元素，并将其放置到缺失区域，我可以避免“移动”元素-我只需要知道如何找到缺失的空间

任何帮助或指向正确的方向都将是伟大的

这是一个

以下是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');​

（函数（）{
网格=功能（el，sel）{
var self=这个，
ran，ranSize，h，w；
self.options={
el:$（el），
sel:$（sel），
科尔斯：1，
区块：{
高度:0,，
宽度：0
},
矩阵：{
w:[]，
h:[]，
t:[]，
l:[]
},
行：{
高度:0,，
宽度：0
},
上校：{
高度:0,，
宽度：0
}
};
/*
*大小数组
*/
self.size=[]；
自身大小[0]=[2,2]；
自我尺寸[1]=[1,2]；
自身大小[2]=[1,1]；
self.setup=函数（）{
/*
*设置所有选项
*/
//块大小
self.options.block.height=（window.innerWidth/self.cols（））/1.5；
self.options.block.width=（window.innerWidth/self.cols（））；
//划船
self.options.row.width=window.innerWidth；
对于（变量i=0；i<60；i++）{
$（“.grid”）.append（“”）；
}
self.size_box（）；
}
self.size_box=函数（）{
if（self.cols（）==1）{
self.options.sel.height（self.options.block.height）；
self.options.sel.width（self.options.block.width）；
}
否则{
self.options.sel.each（函数（）{
$this=$（this）；
ran=Math.floor（Math.random（）*self.size.length）；
ranSize=自身尺寸[ran]；
if（$this.hasClass（'promoted'））{
ran=0；
}
if（$this.hasClass（'post'））{
ran=2；
}
h=self.options.block.height*self.size[ran][6]；
w=self.options.block.width*self.size[ran][0]；
//盒子尺寸
$this.高度（h）；
$this.宽度（w）；
});
}
$（“.grid.box”）.height（self.options.block.height）；
$（“.grid.box”）.width（self.options.block.width）；
}
self.cols=函数（）{
/*
*测定cols
*/
var w=数学地板（窗内宽度）；
var-cols=0；
如果（w<480）{
cols=1；
}
否则，如果（w>480&&w<780）{
cols=2；
}
否则如果（w>780&&w<1080）{
cols=3；
}
否则，如果（w>1080&&w<1320）{
cols=4；
}
否则，如果（w>1320&&w<1680）{
cols=5
}
否则{
cols=6；
}
返回cols；
}
self.resize=函数（）{
$（“.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_box（）；
}
self.setup（）；
回归自我；
};
})();
var_GRID=新网格（'.gallery'，'.box'）；​

如果要将它们放在列中，只需将div放在列中即可。例如，如果您确定应该有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>

第1栏，第1分册
第1栏，第2分部
第1栏，第3分部
第1栏，第4分部
第2栏，第1分部
第2栏，第2分部
第2栏，第3分部
第2栏，第4分部
第3栏，第1分部
第3栏，第2分部
第3栏，第3分册
第3栏，第4分册
第4栏，第1分册
第4栏，第2分部
第4栏，第3分部
第4栏，第4分册

当然，只有在ea中的div