如何解决创建动态网格时防止div增长/拉伸
我正在处理动态图像网格,但无法将网格保留在容器中。这个想法很简单,使用jQuery在容器中添加任意数量的框,并在添加框后将其缩小以适合容器,而无需添加滚动条或退出屏幕。这是在添加列的过程中进行的,但是在添加行时,它只会在屏幕底部运行。
如何修复容器div,以便在添加行时缩小图像,而不是在滚动条上添加行?
function GenerateGrid(rows,cols) {
// Get the available space of the container.
var gridContainerH = $('#container').height();
var gridContainerW = $('#container').width();
// Adjust the image size to fit in the available space.
var imageWidth = gridContainerW / cols;
var imageHeight = gridContainerH / rows;
const container = document.getElementById("container");
var img = document.createElement("img");
img.src = "panel.jpg";
container.style.setProperty('--grid-rows',rows);
container.style.setProperty('--grid-cols',cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
cell.innerHTML = '<img src=box.jpg width=' + imageWidth + ' height=' + imageHeight + '>';
container.appendChild(cell).className = "grid-item";
};
// Recalculate height
var panelHeight = imageWidth * rows;
$('#container').height(panelHeight);
$('#gridContainer').height(panelHeight);
};
// Start with a 5x7 grid
$(window).on("load",function() {
GenerateGrid(5,7);
})
// If the column amount changes,rebuild the grid.
$('#columns').change(function() {
var columns = $("#columns").val();
var rows = $("#rows").val();
$('#container').empty();
GenerateGrid(rows,columns);
});
// If the row amount changes,rebuild the grid.
$('#rows').change(function() {
var columns = $("#columns").val();
var rows = $("#rows").val();
$('#container').empty();
GenerateGrid(rows,columns);
});
:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
display: grid;
grid-gap: 0em;
grid-template-rows: repeat(var(--grid-rows),0fr);
grid-template-columns: repeat(var(--grid-cols),0fr);
}
#gridContainer {
width: 768px;
height: 600px;
max-height: 600px;
}
#staticContainer {
width: 768px;
height: 600px;
max-height: 600px;
}
.grid-item {
padding: 0em;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<form>
<label for="columns">Columns</label>
<input type="number" id="columns" name="columns" value="7">
<label for="rows">Rows</label>
<input type="number" id="rows" name="rows" value="5">
</form>
</div>
<div class="col-lg-10">
<div class="container" id="gridContainer">
<div class="row">
<div class="col-lg-8 text-center">
Horizontal label
</div>
</div>
<div class="row h-100">
<div class="col-lg-1 my-auto">
Vertical label
</div>
<div class="col-lg-7 staticContainer">
<div id="container"></div>
</div>
<div class="col-lg-4 mt-auto">
Right Side
</div>
</div>
</div>
</div>
</div>
</div>
为网格创建不会超出定义的宽度和高度的Div容器涉及什么?
编辑:请以图片为例。
解决方法
避免在评论中链接:。这是您要尝试做的吗? :
(已添加结构修改+ bs4类)
function GenerateGrid(rows,cols) {
// Get the available space of the container.
var gridContainerH = $('#container').height();
var gridContainerW = $('#container').width();
// Adjust the image size to fit in the available space.
var imageWidth = gridContainerW / cols;
var imageHeight = gridContainerH / rows;
const container = document.getElementById("container");
var img = document.createElement("img");
img.src = "panel.jpg";
container.style.setProperty('--grid-rows',rows);
container.style.setProperty('--grid-cols',cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
cell.innerHTML = '<img src=box.jpg width=' + imageWidth + ' height=' + imageHeight + '>';
container.appendChild(cell).className = "grid-item";
};
// Recalculate height
var panelHeight = imageWidth * rows;
$('#container').height(panelHeight);
$('#gridContainer').height(panelHeight);
};
// Start with a 5x7 grid
$(window).on("load",function() {
GenerateGrid(5,7);
})
// If the column amount changes,rebuild the grid.
$('#columns').change(function() {
var columns = $("#columns").val();
var rows = $("#rows").val();
$('#container').empty();
GenerateGrid(rows,columns);
});
// If the row amount changes,rebuild the grid.
$('#rows').change(function() {
var columns = $("#columns").val();
var rows = $("#rows").val();
$('#container').empty();
GenerateGrid(rows,columns);
});
:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
flex:1;
display: grid;
grid-gap: 0em;
grid-template-rows: repeat(var(--grid-rows),0fr);
grid-template-columns: repeat(var(--grid-cols),0fr);
}
#staticContainer {/* width sizing ? while col-lg-7 ?
Added to parent flex-shrink-0 flex-wrap classes but unsure of what you really want */
width: 768px;
height: 600px;
text-align:center;
}
.grid-item {
padding: 0em;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<form>
<label for="columns">Columns</label>
<input type="number" id="columns" name="columns" value="7">
<label for="rows">Rows</label>
<input type="number" id="rows" name="rows" value="5">
</form>
</div>
<div class="col-lg-10 d-flex align-items-center flex-shrink-0 flex-wrap">
<div class="col-lg-1">Vertical label</div>
<div class="col-lg-7 d-flex flex-column" id="staticContainer">
<div>Horizontal label</div>
<div id="container"></div>
</div>
<div class="col-lg-4">
Right Side
</div>
</div>
</div>
</div>
使用具有断点和固定大小的类,否则会使预期的渲染真正令人困惑……您能否阐明预期的大小和行为?
对象适合度也是一个提示吗?
function GenerateGrid(rows,cols) {
// Get the available space of the container.
var gridContainerH = $('#container').height();
var gridContainerW = $('#container').width();
// Adjust the image size to fit in the available space.
var imageWidth = gridContainerW / cols;
var imageHeight = gridContainerH / rows;
const container = document.getElementById("container");
var img = document.createElement("img");
img.src = "http://dummyimage.com/100x200&text=panel.jpg";
container.style.setProperty('--grid-rows',cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
cell.innerHTML = '<img src="http://dummyimage.com/100x200&text=box.jpg" width=' + imageWidth + ' height=' + imageHeight + '>';
container.appendChild(cell).className = "grid-item";
};
// Recalculate height
var panelHeight = imageWidth * rows;
$('#container').height(panelHeight);
$('#gridContainer').height(panelHeight);
};
// Start with a 5x7 grid
$(window).on("load",0fr);
}
#staticContainer {/* width sizing ? while col-lg-7 ?
Added to parent flex-shrink-0 flex-wrap classes but unsure of what you really want */
width: 768px;
height: 600px;
text-align:center;
}
.grid-item {
padding: 0em;
text-align: center;
}
.grid-item img {object-fit:cover;display:block}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<form>
<label for="columns">Columns</label>
<input type="number" id="columns" name="columns" value="7">
<label for="rows">Rows</label>
<input type="number" id="rows" name="rows" value="5">
</form>
</div>
<div class="col-lg-10 d-flex align-items-center flex-shrink-0 flex-wrap">
<div class="col-lg-1">Vertical label</div>
<div class="col-lg-7 d-flex flex-column" id="staticContainer">
<div>Horizontal label</div>
<div id="container"></div>
</div>
<div class="col-lg-4">
Right Side
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。