jquery - 根据数量动态布置固定大小的 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 之间的数字整除，此函数将添加一个名为“质数”的类，因为它很可能是质数。您可以向这些 div 添加一些任意边距值，并接受发生的情况。

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

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

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