我一直在网站上搜索答案,而我遇到的任何内容似乎都没有帮助。我试图使它成为一个默认(并最终由用户指定)数量的div填充包含div像网格。我试图找出如何根据添加的数量来增加我追加到父级的框的大小,同时总是填充div,如果这有意义的话。因此,例如,如果我指定9,我应该有3行3列。如果我指定62,那么我正在寻找16行和16列,总是填满(或接近,无论如何)包含div。这是我到目前为止的JSfiddle:https://jsfiddle.net/psyonix/1g9p59bx/1/以下是代码:
var d = ("<div class='square'></div>");
function createGrid(numSquares){
for(var i = 0; i < numSquares; i++){
$('#g_area').append(d);
}
var squareSize = Math.floor(580/numSquares );
$('.square').height(squareSize);
$('.square').width(squareSize);
};
$(document).ready(function(){
createGrid(64);
});
答案 0 :(得分:1)
我会为此创建一个小jqueryplugin。您可以在自己喜欢的每个容器中调用它:containerForGrid.createGrid(cols, rows)
(function($){
$.fn.createGrid = function(cols, rows) {
// get width and height of sorrounding container
var w = this.width()
var h = this.height()
// calculate width and height of one cell
var colWidth = w / cols
var rowHeight = h / rows
// loop over all rows
for(var i = rows; --i;){
// loop over all cols
for(var j = cols; --j;){
$('<div>').css({
width:colWidth,
height:rowHeight,
float:'left'
}).appendTo(this)
}
}
}
})(jQuery)
jQuery('div').createGrid(10,10)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:1000px;height:500px">
</div>
答案 1 :(得分:1)
唯一的问题是将方块大小设置为高度的1/64而不是高度的1 /(64 ^ .5)。基本上你只需要排成一排。 https://jsfiddle.net/1g9p59bx/7/
var d = ("<div class='square'></div>");
function createGrid(numSquares){
var gridContainer = $('#g_area');
for(var i = 0; i < numSquares; i++){
gridContainer.append(d);
}
var squareSize = Math.floor(580/(Math.sqrt(numSquares)) );
$('.square').height(squareSize);
$('.square').width(squareSize);
};
$(document).ready(function(){
createGrid(64);
});