javascript – 检测div网格中的间隙
作者：互联网
编辑解决方案已被发现！
这是关于它的blog post,这是Github repo！
我正在创建一个由多个大小的框组成的div网格,这些大小设置为高度和宽度 – 但是是动态生成的,因此每次加载页面时都会有不同的网格.
我的问题 –
我尝试使用砌体,但它结束了留下空隙,也尝试了同位素.我目前正在浮动导致布局中断的元素.
它是如何建造的 –
我计算屏幕尺寸并确定页面的最佳列数,范围从1到6,然后根据该列宽我计算一个“块”,这个块基本上是完美的网格.然后我遍历我的元素并给它们1×1,1×2,2×2尺寸.
这里参考的是另一个随机生成的网格
我的问题 –
有没有一种很好的方法来检测缺失的空间 – 目前我将我的红色和黑色框放在我的“块”的另一个网格上,这是绿色的,让我看到我在哪里缺少空间.我已经读过关于背包包装问题以及垃圾箱包装问题 – 我很难理解它们中的任何一个.
我试过的 –
我试图计算,因为我放置块来确定最佳尺寸,但这仍然导致奇怪的行为.我也尝试过使用砌体和同位素.
我的底边很粗糙,但实际网格不能包含任何间隙.
注意 – 网格由潜在的无数元素组成 – 我一直在想,如果我从底部区域采集并复制一个元素并将其放入缺少的区域,我可以避免必须“移动”元素 – 我只是需要知道如何找到丢失的空间.
任何帮助或指向正确的方向都会很棒！
这是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');
解决方法:
我会用一个布尔值的内存矩阵跟踪你的“完美网格”.该矩阵存储是否填充空格.无论何时放置一个方框,都可以计算出哪些方格被占用并更新矩阵.
标签：javascript,css,knapsack-problem,html,bin-packing 来源： https://codeday.me/bug/20190709/1412326.html