javascript - 检测 div 网格中的间隙

Question

编辑 解决方案已找到!

这是一个 blog post关于它，这里是 Github repo !

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

我的问题 - 我尝试使用 Masonry，但最终会留下空隙，我也尝试过同位素。我目前正在 float 导致布局中断的元素。

它是如何构建的 - 我计算屏幕尺寸并确定页面的最佳列数，范围从 1 到 6，然后根据该列宽度我计算出一个“ block ”，这个 block 本质上是完美的网格。然后我遍历我的元素并给它们 1x1、1x2、2x2 尺寸。

供引用的是另一个随机生成的网格

我的问题 - 有没有一种检测缺失空间的好方法 - 目前我将我的红色和黑色盒子放在我的“ block ”的另一个网格上，这些“ block ”是绿色的，以便我查看我缺少空间的地方。我读过背包包装问题，以及垃圾箱包装问题——我很难理解它们中的任何一个。

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

我可以接受粗糙的底部边缘，但实际网格不能包含任何间隙。

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

任何帮助或指向正确的方向都会很棒!

这是一个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

我会使用 bool 值的内存矩阵来跟踪您的“完美网格”。该矩阵存储空格是否已填充。每当您放置一个盒子时，您都会计算哪些方 block 被占用并更新您的矩阵。