根据数量动态布局固定大小的div

Question

对你来说有点难题......

我有一个730px宽的自动高度div。在这里我将有更多的小divs 164px X 261px。

这些将被动态地提取到模板中，所以我可以拥有1，或者我可以拥有18或者为了这个练习，我可以拥有1000或其中任何位置。

我需要将它们分开，以便每条线之间的距离相等。很简单如果我们处理最多4个，我可以做类似的事情：

var totalWidth = $('.bigDiv .smallerDivs').length * $('.bigDiv .smallerDivs').width();
var margin = ($('.bigDiv').width - totalWidth) / ($('.bigDiv .smallerDivs').length * 2);
$('.bigDiv .smallerDivs').css('margin-left': margin , 'margin-right': margin);

然而，当有说5.我希望在顶行有3，在底有2。或者，如果我有7，我希望在底部的前三名中有4。如果有11个我想要4个在顶部，4个在中间，3个在等等等，每一行都很好地证明了它们有很多小盒子。

有人可以提出一个很好的清洁方式吗？

Answer 1

我的答案基本上基于逻辑found in this post's answer。

总的概念是你可以评估div的数量可被整除的数量，然后将一个类附加到更大的div，你可以用它来分隔你的内部div。

$(document).ready(function(){
  function nos_div_eval(val,container,inner){
    var nosDivs = $(inner).length;
     for(var i=val; i>1; i--){
      if (nosDivs % i === 0) {
        $(container).addClass('div_by_' + i);
        break;
      } else {
       $(container).addClass('prime');
      }  
     }
   }

   nos_div_eval(10, '.bigDiv', '.smallerDivs');

});​

这将评估小div的数量，并查看它是否可被2到10之间的任何数字整除。如果匹配，则会向外.div_by_3添加类似<div>的类。它将基于2到10之间的最大数字添加一个类，它可被整除。这样你可以像这样设置你的风格：

.bigDiv.div_by_3 .smallerDivs {
   margin-right: 40px;
 }

 .bigDiv.div_by_4 .smallerDivs {
   margin-right: 20px;
  }

您可以调整保证金金额，以便让div进入您想要的行。

但是，如果较小的div的数量不能被2到10之间的数字整除，则此函数将添加一个名为“prime”的类，因为赔率是素数。您可以为这些div添加一些任意边距值，并与发生的事情保持一致。

如果你真的想覆盖你的基础，你可以改变“i”的初始值 - 你可以将它设置为31，这是一个方形小于1000的最大数字。我只是认为这会使for loop很长。

This fiddle演示了逻辑，尽管我将其简化了一点以使其更清晰。您可以向其添加<div>并查看新的提醒值。

编辑：好吧，我不能单独留下足够的好处，我已经回过头来使用三个参数将功能自行包裹起来。第一个参数是要检查的上限值，然后是容器元素，然后是内部元素。一定要包含'＃'或'。'取决于元素是否具有ID或类 - 这也适用于普通ol'元素。