编辑已找到解决方案！
这是一篇关于它的博客文章，这里是Github repo！
我正在创建一个由多个大小的框组成的 div 网格，这些大小是设置的高度和宽度 - 但是是动态生成的，因此每次加载页面时都会有一个不同的网格。
我的问题-我尝试使用 Masonry，但最终留下了空隙，还尝试了同位素。我目前正在浮动导致布局中断的元素。
它是如何构建的——我计算屏幕尺寸并确定从 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');