編集解決策が見つかりました!
これについてのブログ投稿と、Github リポジトリはこちらです。
複数のサイズのボックスで構成される 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');