使div填充一个包含div?

时间:2015-10-11 20:34:41

标签: javascript jquery css

我一直在网站上搜索答案,而我遇到的任何内容似乎都没有帮助。我试图使它成为一个默认(并最终由用户指定)数量的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);

});

2 个答案:

答案 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);

});