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

Question

对你来说有点谜......

我有一个 730 像素宽的自动高度 div。在这里面我有一些较小的 div 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 在顶部 3 在底部。如果有 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 循环真的很长。

This fiddle 演示了逻辑，尽管我对其进行了一些简化以使其更清晰。您可以在其中添加<div> 并查看新的警报值。

编辑：好吧，我不能一个人呆着，我已经回去让这个函数自己包装起来，用三个参数。第一个参数是您要检查的上限值，然后是容器元素，然后是内部元素。请务必包含“#”或“。”取决于元素是否具有 ID 或类 - 这也适用于普通 ol' 元素。